CSS——页面布局策略

什么是响应式布局：

• 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。
• 通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
• 响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。
• 响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。

响应式布局的实现方案：

1、媒体查询

？什么是媒体查询：

• CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
• 假如一个终端的分辨率小于 980px，举个栗子

• @media screen and (max-width: 980px) {
    #head { … }
    #content { … }
    #footer { … }
  }

   

• 设置多种视图宽度，举个栗子

• /** iPad **/
  @media only screen and (min-width: 768px) and (max-width: 1024px) {}
  /** iPhone **/
  @media only screen and (min-width: 320px) and (max-width: 767px) {}

   

 

？如何选择屏幕大小分割点：

 

2、流式布局（百分比、min、max、vw、vh）：元素宽高发生变化，布局不变

1. 通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高。
2. 子元素的height或width中使用百分比，是相对于子元素的直接父元素的width和height

3、rem布局

3.1、什么是rem：

rem是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

 

3.2、rem响应式的布局思想：

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

3.3、rem布局的缺点：

在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前

 

使用

html{font-size:62.5%;} 而不是 html{font-size:10px;}

 

宽度自适应

• 百分比比vw更好一点
• vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上
• vh vw还是和%有很大区别的，%是相对于父元素，会出现级联反应，而且很多时候parent可能是没有宽度和高度的
• rem相对于html的font-size，其解决的问题是em是根据父容器em来计算当多层嵌套后大小计算会变得很复杂，而rem则简单多了。