标签:技术 独立 font 动态改变 nts 包括 动态 注意 rip
要掌握的知识点:
iphone6 屏幕尺寸为 375*667 (pt)也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大这个值越大(但是像素不一定高)
dpr(设备独立像素):2.0 可用(window.devicePixelRatio)得出 (------------像素越高 或者屏幕越小-------dpr越大)
window.devicePixelRatio = 物理像素 / dips
屏幕分辨率为 750*1334 (px) ppi:326
------------------------------------------------------------------------------
对比 sony z2 屏幕尺寸为327*580
dpr(设备独立像素):3.333
在Android中,规定以160dpi为基准,1dp=1px。如果密度是320dpi,则1dp=2px,以此类推
----------------------------------------------------------------------------------------------------------
思考:
有个常见的现象,就是 pc端 一般字体 设置为12px 为正常字体 可以看清楚,但是把这个网页放到手机端游览 字体就会变得很小,为什么?
因为pc端dpr 一般都是1,所以当设置为12px时是 真正的12px,
而 手机端 现在大部分都是高清屏幕
例如, iphone6 dpr=2 那么 pc上12px大小的字体,放到iphone6上就会被缩小两倍,
sony z2 dpr=3.3 所以pc上12px大小的字体,放到z2上就会被缩小3.33倍,
有 dpr=1 的手机吗?
有!
在举例 iphone 3gs
iphone 3gs 屏幕尺寸为 320*480 分辨率 480*320px dpr=1
iphone 4 屏幕尺寸为 320*480 分辨率 960*640px dpr =2
也就是说:pc上12px的字,在iphone3gs 上可以看清,且同pc上字体大小一样,
pc上12px的字,在iphone4 上会缩小两倍,也就是说pc上12px大小的字 在 iphone4上同样大小 得写24px才行(实际不用,请看下文)
有一个div style=‘多少 px‘ 放到iphone4上 会是宽度全屏 是320px? 还是 640px?
答案是 640px,
二
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
以上这段做移动端时候都会粘贴进去,(上面讨论的字看不清的情况就不存在了)为什么
device-width的计算公式为:设备的物理分辨率/(devicePixelRatio * scale)------可以理解为 device-width 为手机的屏幕大小
那这时候有一个div style=‘多少 px‘ 放到iphone4上 会是宽度全屏 是320px? 还是 640px?
答案是 320px
那么此时可以总结前端设计工作流(网易做法)
1设计师 按照iphone6 像素 设计 750px *1334 px
2 前端
0)
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1">
注意:上面这句不加的时候 iphone6的 document.documentElement.clientWidth=980####上面这句加上的时候 iphone6的 document.documentElement.clientWidth=375
注意:上面这句不加的时候 iphone6的 document.documentElement.clientWidth=980####上面这句加上的时候 iphone6的 document.documentElement.clientWidth=375
注意:上面这句不加的时候 iphone6的 document.documentElement.clientWidth=980####上面这句加上的时候 iphone6的 document.documentElement.clientWidth=375
1)便于计算
html{
font-size:100px
}
2)那么这个时候想要让宽度全屏只需设置body7.5rem
body{
width: 7.5rem
}
3)动态改变html的font-size
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + ‘px‘;
</script>
得出结论: iphone6的时候 html的 font-size 为50px ( 375/7.5 +‘px‘ = 50 px. )
body的 宽度为 7.5*50 = 375px 所以全屏了就
)
同理 sony z2 (加上viewport后)document.documentElement.clientWidth = 360 #### 不加的话为document.documentElement.clientWidth = 980
得出结论: sony z2 的时候 html的 font-size 为50px ( 360/7.5 +‘px‘ = 48 px. )
body的 宽度为 7.5*48 = 360px 所以全屏了就
为什么 两个手机 在不加viewport 时候 document.documentElement.clientWidth = 980?
因为当初移动设备兴起,想游览所有网页 包括pc端的网页,那这个时候问题来了,由于手机屏幕太小,网页放置不下,所以出现了视口的概念,并默认为980,这样相当于 (比如一般pc网页视口宽度为1024)告诉游览器 你把1024宽的网页 放到另一个 980宽的是口里,并且要全部显示,所以系统会把网页缩小980/1024 倍。放到980里,当然真实的手机视口可能都没有那么大。比如iphone6 屏幕宽度 只有375 ,为什么当初视口不定位375? 因为 如果把1024宽的网页 缩放到375宽的屏幕中 要缩小四倍 才能全部显示,这样网页中的内容基本都会太小 而看不清!!
那么我手机视口也定为1024呢?这样倒是不缩放了,网页和pc端一样大,但是会出现横向竖向滚动条太多,游览起来费事,所以定为980 是中间的一个值
总结前端设计工作流(淘宝做法)
举例
0)iphone 6
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1, minimum-scale=1">
2 document.documentElement.clientWidth =750(不是原来的375)
3 html的 font:size = 75px
4 如果想要body横向全屏
body{
width: 10rem
}
参考资料:
http://isux.tencent.com/web-app-rem.html
http://www.cnblogs.com/well-nice/p/5509589.html
http://www.cnblogs.com/dreamlht/p/5112390.html
http://www.chinaz.com/web/2015/1110/468774.shtml#0-tsina-1-17945-397232819ff9a47a7b7e80a40613cfe1
标签:技术 独立 font 动态改变 nts 包括 动态 注意 rip
原文地址:http://www.cnblogs.com/WhiteHorseIsNotHorse/p/6131552.html