让新手能快速掌握的移动端自适应布局
2016-11-28 19:18
363 查看
移动端布局,相信很多人都有自己的一套兼容的方式。这里我也聊聊自己的经验。
一、百分比布局
我最开始的是用百分比布局的,这样的做法的话是比较费时间的,有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间,而且对于设计稿的还原也不好。所以这里>也不怎么推荐。
二、固定的设备宽度
在做移动开发的时候很多人都会加上viewport的配置,
那么固定设备宽度的布局就是根据这个来设置的,将viewport里面的宽度width设置成设计稿的宽度,也就是说原本是width=device-width,即宽度为设备的宽度,假如在iphone6上显示的时候,那么页面的宽度就是375px; 当我们将width设置成设计稿的宽度的,假如设计稿是750px,而我们的css也按设计的尺寸来做,例如一个图片是200px*200px,那么在css上也是宽高都是写200px,也就是1:1的比例。那么在375px的手机上显示的时候,就会缩小2倍显示,以此类推,在320px的宽度的时候,就会缩小2.3倍显示,在414px的宽度的时候就会缩小1.8倍。
这样的写法是会比较好的还原设计稿,而且速度也会比较快,但是这样也有缺点,在缩>小的时候有些设备会比较模糊,因为你强行将设备放大了。
三、rem布局
我现在常用的移动端布局主要是用rem布局,这个应该是比较多人使用的,也是比较流行的。使用rem布局优点是可以适应多个屏幕 ,也比较好的还原设计稿。在有些地方需要一屏显示完设计稿的时候,可能需要用到vh,或是百分比。
rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性,如果我们设置font-size是16px,那么1rem就是等于16px啦。
这里假设我们的设计稿是750px的(我现在做的一般都是750px);我们需要用js动态的计算设备宽度对应的font-size的值,这里我设置320px的时候是16px,以此为基础(现在>一般最小的设备宽度就是320px),以下是具体的代码:
javascript 代码
那么在375px的宽度下,font-size就是375/320*16 = 18.75;
如果设计稿上有个图片是200px*200px,那么在375px的设备上图片的宽度应该换成多少rem呢,这里我们算一下,
设图片在375px的宽度是x,那么750/200 = 375/ x;x = 100; 图片宽度即为 100/18.75约为5.33rem,这个换算的过程我们可以交给sass,或是less去编译。这样我们就很方便的使用了。
下面是我常用的rem布局的sass代码
如果文章有问题欢迎大家多多吐槽
参考文章:《设备像素比devicePixelRatio简单介绍》
一、百分比布局
我最开始的是用百分比布局的,这样的做法的话是比较费时间的,有些细节的地方还需要用媒体查询来做兼容。做起来挺费时间,而且对于设计稿的还原也不好。所以这里>也不怎么推荐。
二、固定的设备宽度
在做移动开发的时候很多人都会加上viewport的配置,
那么固定设备宽度的布局就是根据这个来设置的,将viewport里面的宽度width设置成设计稿的宽度,也就是说原本是width=device-width,即宽度为设备的宽度,假如在iphone6上显示的时候,那么页面的宽度就是375px; 当我们将width设置成设计稿的宽度的,假如设计稿是750px,而我们的css也按设计的尺寸来做,例如一个图片是200px*200px,那么在css上也是宽高都是写200px,也就是1:1的比例。那么在375px的手机上显示的时候,就会缩小2倍显示,以此类推,在320px的宽度的时候,就会缩小2.3倍显示,在414px的宽度的时候就会缩小1.8倍。
这样的写法是会比较好的还原设计稿,而且速度也会比较快,但是这样也有缺点,在缩>小的时候有些设备会比较模糊,因为你强行将设备放大了。
三、rem布局
我现在常用的移动端布局主要是用rem布局,这个应该是比较多人使用的,也是比较流行的。使用rem布局优点是可以适应多个屏幕 ,也比较好的还原设计稿。在有些地方需要一屏显示完设计稿的时候,可能需要用到vh,或是百分比。
rem布局简单来说就是根据页面的font-size的大小来设置页面元素的属性,如果我们设置font-size是16px,那么1rem就是等于16px啦。
这里假设我们的设计稿是750px的(我现在做的一般都是750px);我们需要用js动态的计算设备宽度对应的font-size的值,这里我设置320px的时候是16px,以此为基础(现在>一般最小的设备宽度就是320px),以下是具体的代码:
javascript 代码
(function (doc, win) { · var docEl = doc.documentElement, · resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', · recalc = function () { · var clientWidth = docEl.clientWidth; · if (!clientWidth) return; · docEl.style.fontSize = 16 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; · win.addEventListener(resizeEvt, recalc, false); · doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
那么在375px的宽度下,font-size就是375/320*16 = 18.75;
如果设计稿上有个图片是200px*200px,那么在375px的设备上图片的宽度应该换成多少rem呢,这里我们算一下,
设图片在375px的宽度是x,那么750/200 = 375/ x;x = 100; 图片宽度即为 100/18.75约为5.33rem,这个换算的过程我们可以交给sass,或是less去编译。这样我们就很方便的使用了。
下面是我常用的rem布局的sass代码
//基础font-size $font:16; //设计稿宽度 $screen:750; @function px2rem($n){ @return #{$n/($screen*$font/320)}rem } //例如 设计稿宽度200px 那么可以写 width = px2rem(200);可以自动换算成rem;
如果文章有问题欢迎大家多多吐槽
参考文章:《设备像素比devicePixelRatio简单介绍》
相关文章推荐
- 移动端自适应布局大法
- 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应
- 移动端自适应:flexible.js可伸缩布局使用
- 移动端常见div同行自适应布局
- 新手如何快速掌握运用设计模式
- 快速掌握Android教程适合新手(4G)57讲
- (九)8天快速掌握Android视频教程_深入了解各种布局技术
- html rem布局,在移动端超级好用,自适应效果非常好!
- Html5移动端页面自适应百分比布局
- 移动端网页 rem 自适应布局
- 1.2 快速掌握 Android 中的六大布局
- 移动端web app自适应布局探索与总结
- 超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码
- 如何学习linux,新手如何快速掌握linux
- 移动端自适应布局的高效方法,欢迎批评或指正
- 移动端web app自适应布局探索与总结
- rem自适应布局-移动端自适应必备:flexible.js
- css基础02:移动端自适应布局方案
- 移动端网页 rem 自适应布局