响应式布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式布局相关的知识,希望对你有一定的参考价值。

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端采用三栏式布局,平板端采用两栏式布局,手机端采用一栏式布局。

以上是关于响应式布局的主要内容,如果未能解决你的问题,请参考以下文章

「布局」静态布局、自适应布局、流式布局、响应式布局、弹性布局简析

六、PC端全局响应式布局

响应式布局方案

响应式布局简明示例

响应式布局与自适应式布局有什么不同

响应式布局与弹性布局基础篇