响应式布局

含义: 指同一页面在不同屏幕尺寸下有不同的布局, 传统的开发方式是PC端那一套, 手机端再开发一套,

而是用响应式布局只要开发一套就够了, 缺点是css比较重

响应式设计与自适应设计的区别: 响应式开发一套界面, 通过检测视口标签, 针对不同客户端在客户端做代码处理, 来展现不同布局的内容; 自适应需要开发多套界面通过检测视口分辨率, 判断访问的设备是pc端, 平板, 手机, 从而请求服务层, 来返回不同的界面. 屏幕分成超小屏幕, 小屏幕,

中等屏幕, 大屏幕

媒体查询

针对不同媒体类型定义不同的样式, 当重置浏览器窗口大小的过程中, 会根据浏览器的高度和宽度重新渲染页面

百分比布局:

缺点:

计算困难, 定义一个元素的宽高, 必须按照设计稿, 换算成百分比
width和height相对父元素的width和height, margin和padding不管垂直还是水平方向都是相对于父元素宽度的, border-radius则是相对于元素自身的, 这使得百分比的布局问题变得复杂

rem布局

REM是css3的新单位, 并且移动端的支持度很高. rem相对于根元素的font-szie大小, 根元素的font-size提供一个基准值, 当页面的size发生变化时, 只需要改变font-size值. 以rem为固定单位元素的大小也会发生响应式变化, 如果需要改变布局的大小, 只需要动态改变font-size就行了

rem布局方法:

所有设置的固定值都用rem做单位, 在html上设置一个基准值, px和rem的比例相对应, 然后在效果图上获取px值, 布局时转换为rem
js获取真实的屏幕宽度, 让其除以设计稿的宽度, 算出比例, 把之前的基准值按照比例重新设置, 这样项目在移动端自适应了

缺点: 必须通过js来动态控制根元素font-size的大小, 也就是说, css样式和js的代码有一定耦合性, 必须把font-size的代码放在css之前

视口单位

css3新引入的单位, 与视图窗口有关, vw表示相对视图窗口的宽度, vh相对于视图窗口的高度, vmin和vmax是其中的较小, 较大值