A-A+

移动端页面开发笔记(一)

2016年01月05日 htmlcss 暂无评论 阅读 96 次

document.documentElement.style.fontSize = document.body.clientWidth * (16/320) + 'px';

 

用@media,判断viewport ,
然后设置font-size
一般都是按照iphone分辨率做的
逻辑分辨率是实际分辨率的1/2
给你720
你就按360做
这个事nexus5的分辨率

iphone5是320分辨率
按比例设置font size
@media(min-width:360){html{font-sisz:100px;}}
@media(min-width:320){html{font-sisz:88.88px;}}
按比例写fontsize
这样在不同分辨率上看 整体的比例都是一样的
不是 这样你得多写几个@media
把主流分辨率都写了
然后你开发的时候 只看360下的情况就行了
剩下的不会有什么大问题
写主要的几个

18
这几个nexus 还有iphone ipad
基本就都覆盖了
写一次一劳永逸
这个事实际分辨率
但是移动端上1px 不实屏幕的1px
你得按逻辑分辨率写
得看dpr是多少

22

这个是屏幕分辨率的1px和css里面1px的比值
你设置1px dpr是2 那么显示出来就是2px dpr是3 显示出来就是3px 有可能是小数
dpr好像有1.8的。。。
pc上1px 就是1px
dpr就是1
不过好像也不一定。。。不过一般不用管

3

你看这个地方
pc上的
dpr也是2
好像是我电脑强制缩放了
其实几句话就说明白了呀.......
css里所有的px都是css pixel,其显示大小是相对的而不是绝对的,是设备相关的。
而css pixel * devicePixelRatio = 实际屏幕像素。
(平时电脑屏幕的devicePixelRatio都是1所以感觉不到,会让你误以为css里的px就是实际屏幕像素)
同时media query使用的px显然也是css pixel。可以用chrome按f12开emulator看,一目了然。
108d39e9857203ec3a524a8115c007d8_b

模拟器里有很型号可以选择,比如Nexus 5, iPhone等等

2449dbe4fcd7d27002e4bdcb74ef01f9_b
下图左边的就是css pixel, 右边是devicePixelRatio

cb57176afe143a8277d584ff5fe3a65c_b
b4a39dd012b04477c910a1b8fc57e7b6_b
如图,Nexus 5的css pixel是360x640,devicePixelRatio是3,实际屏幕尺寸就是(360*3)x(640*3)=1080x1920 (实际上应该根据屏幕尺寸和devicePixelRatio来反推css pixel)
可以看到大部分安卓设备的css pixel尺寸都是360x640你可以这么简单理解:
不管是1080x1920的屏幕还是720x1280的屏幕,对于移动端浏览器来说,尺寸都是360x640
所以,写css的时候以css pixel为准,也就是说:假设设计图做成了720x1280的,那么css里所有尺寸都除以2即可。
而对于图片,比如一张实际大小100*100px的图片,并且width和height都设了100px(注意这里的px是css pixel),实际占用了屏幕的像素数就是(假设devicePixelRatio是3)300*300px(注意这里的px是真实的屏幕像素)
所以,如果希望网页的元素在高ppi设备上显示不模糊(比如1080x1920屏幕的手机),位图应该做3倍的尺寸(比如做300*300px的图,然后在css中设width和height为100px),svg(矢量图)就无所谓了。
(所以svg大法好!png都是异端!)因此在你的例子中,应该写min-width:400px
同时最好加上<meta name="viewport" content="width=device-width"/>
(绝大部分1080x1920屏幕的设备devicePixelRatio都是3,1200/3=400)
原文地址:https://www.zhihu.com/question/28082877/answer/39413838
ps:

http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

移动前端开发之viewport的深入理解http://www.cnblogs.com/2050/p/3877280.html

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录