响应式

2020-09-16 本文已影响0人懂会悟

1、引言

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本（同一页面在不同屏幕尺寸下有不同的布局）。这个概念是为解决移动互联网浏览而诞生的

2、响应式布局解决方案

媒体查询

媒体查询可以让我们针对不同的媒体类型定义不同的样式，当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式

常见的分隔点

768
992
1200
1920

分隔点不是一成不变的，要随着项目的实际需求的变化而变化，移动端优先使用min-width，pc端优先使用max-width

/* iphone6 7 8 */
body {
    background-color: yellow;
}
/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red;
    }
}
/* iphoneX */
@media screen and (min-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
    }
}
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* ipad pro */
@media screen and (min-width: 1024px) {
    body {
      background-color: #FF00FF;
    }
}
/* pc */
@media screen and (min-width: 1100px) {
    body {
      background-color: black;
    }
}

/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
        background-color: green;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
        background-color: blue;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
        background-color: #0FF000;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
        background-color: #0FF000;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
        background-color: #0FF000;
    }
}

3、百分比

通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果，但是子元素不同属性的百分比的参照物是不同的

width相对于父元素的width
height相对于父元素的height
子元素的top、bottom、left、right，则相对于直接非static定位(默认定位)的父元素的高度
子元素的padding、margin都相对于直接父亲元素的width，而与父元素的height无关
border-radius、translate、background-size等都是相对于自身的宽度

显然使用百分比进行响应式布局计算会分繁琐，因此在布局时要谨慎使用

4、rem

rem 是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持，rem单位是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准

当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可

rem布局的思想

一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
高度值可以设置固定值，设计稿有多大，我们就严格有多大
所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)
js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了
1rem等于html根元素设定的font-size的px值

/* pc width > 1100px */
html{ font-size: 100%;}
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}
/* ipad */
@media screen and (max-width: 768px) {
    body {
      background-color: green;
      font-size: 1.3rem;
    }
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    body {
      background-color: blue;
      font-size: 1.25rem;
    }
}
/* iphoneX */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
    body {
      background-color: #0FF000;
      font-size: 1.125rem;
    }
}
/* iphone6 7 8 */
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
    body {
      background-color: #0FF000;
      font-size: 1rem;
    }
}
/* iphone5 */
@media screen and (max-width: 320px) {
    body {
      background-color: #0FF000;
      font-size: 0.75rem;
    }
}

cssrem插件

手动转换px与rem不仅效率低而且容易出错，因此推荐vscode 的cssrem 插件

cssrem插件是vscode ide 的一款插件，主要实现了在书写代码的时候直接将px转成rem

5、总结

在实际项目中，我们可能需要综合上面的方案，要点如下

设置viewport
媒体查询
字体的适配(rem)
百分比布局
图片的适配
结合flex弹性布局

参考

响应式