什么是响应式布局如何实现响应式布局有哪些方式( 二 )

类似于百分比布局，但更好使用。
响应布局方法4: rem Rem单位是相对于字体大小的html元素，也称为根元素。默认情况下，html元素的字体大小是16px 。因此，1rem = 16px 。
头版
@media screen and (max-width: 414px) { html { font-size: 18px }}@media screen and (max-width: 375px) { html { font-size: 16px }}@media screen and (max-width: 320px) { html { font-size: 12px }}
使用rem和媒体查询，当分辨率改变时，给它一个不同的字体大小。
优化版本
//动态为根元素设置字体大小function init () { // 获取屏幕宽度 var width = document.documentElement.clientWidth // 设置根元素字体大小。此时为宽的10等分 document.documentElement.style.fontSize = width / 10 + ‘px’}//首次加载应用，设置一次init()// 监听手机旋转的事件的时机，重新设置window.addEventListener(‘orientationchange’, init)// 监听手机窗口变化，重新设置window.addEventListener(‘resize’, init)
理解:上面的代码实现了无论设备的可视窗口如何变化，rem总是设置为宽度的1/10 。也就是说，实现了百分比布局。没有第一版的媒体质疑那么生硬。
上面的代码应该写在dom之前(可以放在head的第一个script标签里)
用UI框架实现响应式布局其实目前主流的UI框架都会考虑响应式布局的问题。例如，elementUI和iview等框架提供了网格系统，
移动响应布局视口 lt;meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /gt;
Width=device-width:是自适应手机屏幕的尺寸宽度。Maximum-scale:是缩放比例的最大值。Minimum-scale:是缩放比例的最小值。Inital-scale:是缩放的初始化。用户可伸缩:用户的可伸缩操作。
这种写法是用户无法缩放的页面设计。因为，如果页面可以缩放，会影响用户的体验。在手机上，我们都可以找到点击的按钮或者感兴趣的菜单进行操作。第二，如果我们让页面缩放，就会完全暴露我们手机app的html架构。所以我们在为移动设计页面的时候，不需要用户缩放。
灵活. js Flexible.js由阿里手淘团队开发。用于解决移动终端的适配问题。
现在假设你想适应一台iphone6设备。设计师给出了宽度为750px的设计稿(注意这里是750px而不是375px) 。前端工程师开始用750px的比例还原，转换成宽高为px的rem字体而不是remflexible.js会自动判断dpr放大缩小整个布局视口。至于如何使用flexible.js，大家可以自己去搜，因为我在移动端做的不多，就不多说了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 www.mianfo.com 举报，一经查实，本站将立刻删除。

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：

什么是响应式布局如何实现 响应式布局有哪些方式( 二 )

什么是响应式布局如何实现响应式布局有哪些方式( 二 )