移动端布局的4种方法

移动端布局分类

移动端布局主要分为四类,分别是流式布局,rem布局,响应式布局和弹性布局

流式布局

使用非固定像素来定义网页内容,也就是百分比布局,通过合资的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不收固定像素的限制,内容向两侧填充。

rem布局

rem:css(相对单位,相对于网站根元素,即根据html元素的font-size来计算大小,比如说html-font-size大小为50px,一个div的width为1rem,则div的width大小为50px,所以在不同屏上,只要我们动态的算出html的大小,泽科起到一改俱改的效果,实现等比例放大缩小,因为html的font-size是等比算出来的)

响应式布局

简而言之,就是一个往回走哪能够兼容多个终端。css3中的Media Query(媒介查询),通过查询screen的宽度来制定某个宽度区间的网页布局。他主要是通过查询设备的宽度来执行不同的css代码,最终达到界面的配置。

弹性布局

高度定死,宽度自适应,元素都采用px。随着屏幕宽度变化,效果及䄦PC页面的流体布局差不多,在那个宽度需要调整的时候使用响应式布局就行(比如网易新闻),这就实现了设配

<meta name="viewport" content="width=device-width,initial-scale=1,
maximum-scale=1,user-scalable=no">

本文链接:https://my.lmcjl.com/post/11537.html

展开阅读全文

4 评论

留下您的评论.