响应式布局

Posted 2020-08-10

1、自适应页面：能使页面自适应显示在不同大小终端设备上的页面。
2、响应式布局：一个网站能够兼容多个终端，而不是为每个终端都做一个特定的版本，实现响应式布局的方法：bootstrap和CSS原生代码两种方法。
3、CSS原生代码是通过@Media媒体查询，改变屏幕宽度使其自适应。
4、响应式布局中：单位1em=16px,相对于body，会继承；1rem=16px，相对于根元素，不会继承。
5、PC端@media screen and (min-width:1000px){}
手机端@media screen and (max-width:767px){}
平板端@media screen and (min-width:768px)and (max-width:999px){}
一般建议宽度设置100%自适应，网页头部，尾部高度格局不变，其余自适应，根据屏幕大小的不同，这是的阈值的不同，显示不同的网页布局内容。
6、需引入viewport元数据标签（head）,为了可以使屏幕缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7、px特点：
IE无法调整那些使用px作为单位的字体大小，国外大部分网站能够调整的原因在于其使用了em和rem作为字体单位。
8、em是相对长度单位。相对于当前对象内文本的字体尺寸。
9、布局法：
一般来说，PC端采用三栏式布局，平板端采用两栏式布局，手机端采用一栏式布局。