移动端前端适配方案20170707
2017-07-07 13:28
525 查看
1.Meida Queries
meida queries的方式可以说是我早期采用的布局方式,它主要是通过查询设备的宽度来执行不同的
css代码,最终达到界面的配置。核心语法是:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ /*你的css代码*/ }
优点
media query
可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。目前像Bootstrap
等框架使用这种方式布局- 图片便于修改,只需修改css文件
- 调整屏幕宽度的时候不用刷新页面即可响应式展示
缺点
- 代码量比较大,维护不方便
- 为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源
- 为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式
弹性布局
它的
viewport是固定的:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
根据
rem将页面放大
dpr倍, 然后
viewport设置为
1/dpr.
- 如iphone6 plus的dpr为3, 则页面整体放大3倍, 1px(css单位)在plus下默认为3px(物理像素)
- 然后
viewport
设置为1/3, 这样页面整体缩回原始大小. 从而实现高清。
这样整个网页在设备内显示时的页面宽度就会等于设备逻辑像素大小,也就是
device-width。这个
device-width的计算公式为:
设备的物理分辨率/(devicePixelRatio * scale),在
scale为1的情况下,
device-width = 设备的物理分辨率/devicePixelRatio。
通过以下代码来控制
rem基准值(设计稿以
720px宽度量取实际尺寸)
!function (d) { var c = d.document; var a = c.documentElement; var b = d.devicePixelRatio; var f; function e() { var h = a.getBoundingClientRect().width, g; if (b === 1) { h = 720 } if(h>720) h = 720;//设置基准值的极限值 g = h / 7.2; a.style.fontSize = g + "px" } if (b > 2) { b = 3 } else { if (b > 1) { b = 2 } else { b = 1 } } a.setAttribute("data-dpr", b); d.addEventListener("resize", function () { clearTimeout(f); f = setTimeout(e, 200) }, false); e() }(window);
相关文章推荐
- 移动端前端适配方案对比
- 前端读者 | 移动端适配问题解决方案
- (礼拜五log)前端适配方案:rem
- 为移动端开发提供纯前端的路由方案
- 移动端适配方案进阶
- 移动端适配方案
- web前端之移动端适配
- 移动端开发的简单适配方案
- webapp:移动端高清、多屏适配方案(zz)
- 前端新手——适配不同手机端页面的方案,动态查询dpr设置根元素font-size
- 移动端高清、多屏适配方案
- 移动端高清、多屏适配方案
- 移动端适配方案进阶
- 移动端高清,多屏适配方案!
- 移动端web屏幕适配方案整理
- 原创移动端高清、多屏适配方案
- 移动端高清、多屏适配方案
- EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端
- 移动端多屏适配方案
- 手淘的移动端适配方案flexible