响应式网页设计布局学习

响应式网页设计布局

      随着移动互联网的发展和微信的突起，移动端的响应式布局越来越重要了。

目前网站布局有以下几种：

1.定宽度布局

      很多pc的网站都是定宽度布局的，也就是设置了min-width，这样一来，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。

2.响应式布局

      所谓响应式布局就是流式布局+媒体查询，流式布局用来解决不同宽度的布局问题，外加媒体查询，可以调整布局，例如大屏幕是布局1，小屏幕是布局2，这种布局通吃pc和移动端，做到精细处，两者的效果都很好，缺点是媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。

3.rem布局

      近期出现rem布局，原理是，先按定高宽设计出来页面，然后转换为rem单位，配合js查询屏幕大小来改变html的font-size，最终做出所谓的完美自适应。

rem的缺点

      rem一出好像所有移动端自适应不采用rem都很low一样，来分析分析，假设以100x100做出网页，那么采用rem+js完全可以自适应所有200x200，300x300，450x450等等高宽。

问题来了：

      如果用100x100设计好后，来了100x200，100x300，100x400的手机，那么效果无非两种：

      1.网页内容只局限与网页顶部，例如100x400的手机，网页内容只占用的100x100的部分；

      2.有人说可以高度也js+rem，那么效果无非是拉伸或者缩放。

      注：尊重原创文章,转载请注明出处和链接 https://www.pxwy.cn/news-id-21196.html 违者必究！部分文章来源于网络由培训无忧网编辑部人员整理发布,内容真实性请自行核实或联系我们，了解更多相关资讯请关注网页制作频道查看更多，了解相关专业课程信息您可在线咨询也可免费申请试课。关注官方微信了解更多：150 3333 6050