移动端高清、多屏适配方案——rem
背景：
- 开发移动端H5页面
- 一套设计图
- 不同尺寸的手机
- 不同分辨率的手机
方案：使用rem作为单位解决一套设计图适应不同分辨率，不同尺寸的手机。
概念：
- REM(font size of the root element). 相对于<html>的font-size的计算方式。
- dpr(device pixel ratio).设备像素比；i5,6 = 2;i6plus=3;
- <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport" />
- ve,vh:Length units representing 1% of the viewport size for viewport width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax).“视区”所指为浏览器内部的可视区域大小，即
window.innerWidth/window.innerHeight大小.vw单位巧妙实现滚动条出现页面不跳动
思路：a,相同的rem,只需要更改页面根元素的font-size;
- 通过媒体查询根据屏幕区间，更改html的font-size.把与元素尺寸有关的css,如width,height,line-height,margin,padding等都以rem作为单位,这样页面在不同设备下就能保持一致的网页布局。;
- 布局
@media screen and (max-width: 320px) {
html{font-size: 14px;}
}
@media screen and (min-width: 321px) and (max-width: 413px) {
html{font-size: 16px;}
}
@media screen and (min-width: 414px) and (max-width: 639px) {
html{font-size: 17px;}
}
@media screen and (min-width: 640px) {
html{font-size: 18px;}
}
- 布局
- 通过js库,动态更改html的font-size;(lib-dlexiable)；
常见问题：
- retina屏幕需要高清图片，然而普通屏幕加载高清图片却浪费资源耗带宽，因此根据不同手机dpr加载不同的图片可以解决这问题。
@mixin img-dpr(){
background-image: url(image.jpg);//默认
[data-dpr="2"] & {
background-image: url(image@2x.jpg);//两倍高清
}
[data-dpr="3"] & {
background-image: url(image@3x.jpg);//三倍高清
}
}
.content{
@include img-dpr();
} - 字体会随着屏幕自由变化
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
.content{
@include font-dpr(12px);
} - border:1px 的做法（有好的做法，请推荐，谢谢）
@mixin border-dpr($side,$size,$color){
border-#{$side}: $size solid $color;
[data-dpr="2"] & {
border-#{$side}: $size * 2 solid $color;
}
[data-dpr="3"] & {
border-#{$side}: $size * 3 solid $color;
}
} - 雪碧图错位问题：a,先放大100倍，提高图片精度，找到图片位置，再缩小100倍;b,最好是使用字体图标;c,单个背景
.icon-fix {
background: none;
position: relative;
overflow: hidden;
} .icon-fix:after {
content: '';
display: block;
width: 10000%;
height: 10000%;
position: absolute;
left: 0;
top: 0;
background-image: url(sprite.png);
background-repeat: no-repeat;
background-size: 140rem;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(.01);
transform-origin: 0 0;
transform: scale(.01);
} .icon3:after {
background-position: 0 -280rem;
} - 设计稿px转成rem:640的设计稿$base:40;750的设计稿$base:75.
@function pxToRem($px, $base: 40) {
@return ($px / $base) * 1rem;
}
#demo{with:pxToRem(30)} - flexible使用文档说明：详情文档查考：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
- <head>中添加对应的flexible_css.js和flexible.js文件。一定是要在head中先引入。
- 执行这个JS后，会在
<html>元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px； - 在js中设置栅格数
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {//目前主流手机最大的css像素尺寸，是540（比如devicePixelRatio为2，分辨率是1080x1920的手机），所以用了这个经验值。这样可以让在ipad横屏这种情况下浏览无线页面，不至于因为拉伸适配后体验太差。
width = 540 * dpr;
}
var rem = width / 16;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
- 页面中的元素，都可以通过
rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果 - 其中
initial-dpr会把dpr强制设置为给定的值。如果手动设置了dpr之后，不管设备是多少的dpr，都会强制认为其dpr是你设置的值。Android系列，始终认为其dpr为1。 - 事实上他做了这几样事情：
- 动态改写
<meta>标签 - 给
<html>元素添加data-dpr属性，并且动态改写data-dpr的值 - 给
<html>元素添加font-size属性，并且动态改写font-size的值
- 动态改写
讨论：
- 字体需不需设置成px？()
- 原先设计图是640的，新设计图是750的。如何兼容之前的版本？
- 能不能在refeshRem中的540适当的放大，从而支持pad样式？
- rem兼容哪些坑？
- 部分小机型，页面渲染meta没有渲染出来。
- dpr是3的时候scale是0.333333333不是1：1
- 图片服务器。高清屏看高清图。
H5适配终端数据
参考文档：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
移动端高清、多屏适配方案——rem的更多相关文章
- 移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- 解惑好文：移动端H5页面高清多屏适配方案 (转)
转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...
- [转]:移动端H5页面高清多屏适配方案
原文链接:http://www.tuicool.com/articles/YJviea 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们 ...
- 解惑好文：移动端H5页面高清多屏适配方案
背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...
- CS5265 新出TYPEC转HDMI 4K60 高清投屏转接方案|可替代RTD2172
CS5265是一种高度集成的单芯片,主要用于设计typec转HDMI转接线或者typeC转HDMI转换器,应用在各种手机或者电脑显示端设备当中.用CS5265设计的TYPEC转HDMI 4K高清投屏线 ...
- webapp：移动端高清、多屏适配方案（zz）
来源: http://sentsin.com/web/1212.html 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉 ...
- 移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]
Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...
- CS5265替代LT8711设计TYPEC转HDMI 4K高清投屏方案|LT8711龙迅替代方案
龙迅LT8711是一款Type-C/DP1.2 to HDMI2.0方案芯片.LT8711HE是一款高性能Type-C/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接 ...
- Android高清巨图加载方案
1.今天看了鸿洋的<Android高清巨图加载方案>一文,对加载高清巨图时的解决方案有了一定的认识. 思路为: 提供一个设置图片的入口. 重写onTouchEvent,在里面根据用户移动的 ...
随机推荐
- 有关C#分部类型的一些叙述
等待着元宵节的到来,过完元宵,这个年也算是过完了,也得开始出去挣钱了,过年回家感觉每个人都觉得很牛,只有自己太渣,为了避免年底再出现这样尴尬的局面,还是需要努力干活.争取当上CEO,赢取白富美,走上人 ...
- Android音频焦点详解（上）
转载请注明出处:http://www.cnblogs.com/landptf/p/6384112.html 2017年开年第一篇博客,很早就想总结一下Android音频的相关知识.今天我们先来看一下音 ...
- 读书笔记 effective c++ Item 13 用对象来管理资源
1.不要手动释放从函数返回的堆资源 假设你正在处理一个模拟Investment的程序库,不同的Investmetn类型从Investment基类继承而来, class Investment { ... ...
- win8 wifi开关显示关闭，且设置里面wifi开关显示灰色的解决办法
只要从华硕官网下载驱动,电源管理驱动,安装下面显示的几个软件即可,然后重启电脑,即可看见wifi热点,另外设置里面的wifi开关也将显示正常(刚开始安装了个驱动人生根本没用,最后在华硕官网下载了个电源 ...
- shell-早间学习，每日一点-5
http://www.cnblogs.com/liuling/p/2013-8-4-01.htmlhttp://www.cnblogs.com/stephen-liu74/category/32665 ...
- WP8.1开发中关于如何显示.gif格式动态格式图片方法
这几天又遇到个问题,就是如何显示动态图片,本来以为和显示静态图片一样,谁知不行,在网上一查才知道WP8.1不支持.gif格式动态图片的显示: 后来又在MSDN论坛上查找,也有人问类似的问题,后来就大概 ...
- 关于jquery中封装函数如何传递当前元素的问题
需要对页面上一组元素进行ajax操作 <div id="aid"></div> <div id="aid"></div ...
- IntelliJ IDEA 报错：Error:java: 未结束的字符串文字
构建javaweb项目时,控制台报错: 这个问题是由于编码冲突导致的,在设置中找到File Encodings可以看到 ide采用utf-8编码格式,而项目则是GBK编码方式,由此产生冲突. 解决办法 ...
- javaweb 打包为安卓apk（1）-Hbuilder
需求:当前已经完成java web项目开发,java web项目前端使用自适应框架(bootstrap),想使用最简单方式生成一个安卓apk,无需进行安卓开发(类似于手机浏览器访问一样) 要求:项目已 ...
- Kafka概述与设计原理
kafka是一种高吞吐量的分布式发布订阅消息系统,有如下特性: 1. 通过O(1)的磁盘数据结构提供消息的持久化,这种结构对于即使数以TB的消息存储也能够保持长时间的稳定性能. 2 .高吞吐量:即使是 ...