首页>> 移动端网站>>移动网站开发中的一些概念

移动网站开发中的一些概念

移动端网站 蜗牛SEO 40℃

一、viewport

PC上的网页宽度一般最小都是1024像素,但是手机屏幕宽度没这么大,浏览器可视区域的尺寸最大也不超过手机屏幕宽度,如果直接显示PC版的网页的话,会挤作一团,排版什么的都会乱掉,怎么办呢?弄一个虚拟的网页显示视窗(viewport),这个视窗比浏览器可视区域大就可以把PC上的网页显示在手机屏幕上了(移动设备上的浏览器会把自己的viewport设为980或1024),这就是viewport中的第一个概念,layout-viewport。

二、css中的px问题
px是一个抽象相对的像素单位,是指一个逻辑像素,在pc上1个逻辑像素就等于1个物理像素,但在移动端逻辑像素和物理像素并不相等,为什么呢?
移动端的屏幕尺寸非常小,如果1个物理像素等于1个逻辑像素的话,显示出来的文字和图片之类的清晰度不够高不够细腻,怎么办呢?把物理像素提高,即在1个逻辑像素由更多的物理像素。

三、移动端图片模糊的原因

位图像素是栅格图像(如:png,jpg,gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息。(如:显示位置,颜色值,透明度等)

理论上来说,1个位图像素对应1个物理像素,图片才能达到清晰的展示。

四、高清屏下html中1px的边框比视觉图中的粗

设计师在视觉标注图上标明边框为1像素,于是你在css中很愉快的写下border:1px,结果悲剧了,在iphone6这种高清屏中看起来1px比较粗。

原因还是上面第2点的知识,1px不等于1个物理像素,在iphone6中1px等于2个物理像素,看着就会比视觉稿上的粗。

五、视觉稿如何还原?

为了适配高清屏,UI一般会以Iphone6的物理分辨率来设计视觉稿,即视觉图的宽度为750px,为什么会选iphone6呢?因为iphone6的尺寸在手机屏幕尺寸中算是一个中间值。

还原视觉稿时,简单粗暴的做法是直接将标注的尺寸除以2来确定宽高(除以2是因为iphone6的dpr为2,750个物理像素的宽度,在iphone6上只需要375个独立像素就能铺满了),这么做在屏幕尺寸更大的手机上,两边就会留白,而在更小尺寸的屏幕上最会显示不全。

转载请注明:⎛蜗牛SEO⎞ » 移动网站开发中的一些概念

喜欢 (0)or分享 (0)

蜗牛SEO是国内领先的搜索营销服务商,有丰富的客户服务经验,我们有专业的网站优化、IDC代理、网站建设、APP开发、全网营销团队,可以持续为您提供优质的服务,您的满意是我们不懈的追求。

城市分站:上海SEO北京SEO广州SEO深圳SEO网站建设武汉SEO重庆SEO成都SEO

业务范围:网站优化,网站建设,IDC代理,app开发,全网营销

微信:ganshangwoniu    QQ:549233124

Copyright © 2008-2020 蜗牛营销版权所有

QQ在线咨询
蜗牛SEO微信号