HTML中移动端有哪些布局方案


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

最近我研究了淘宝,天猫和网易彩票163的wap主页样式布局,今天给大家来总结一些移动端布局方案,并且分析一下所使用技术的利弊。

注意:代码运行是file协议,在chrome里不支持引用本地文件,会提示跨域错误,可以用firefox或者Safari打开

wty2368

移动端布局方案探究

研究了淘宝,天猫和网易彩票163的wap主页样式布局,总结移动端布局方案
注意:代码运行是file协议,在chrome里不支持引用本地文件,会提示跨域错误,可以用firefox或者Safari打开

当时做的ppt下载: 2015年12月移动端布局方案探究

一、基本概念

1. 物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元

2. 设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素),可以认为是计算机坐标系统中得一个点,这个点代表一个可以由程序使用的虚拟像素(比如: CSS像素)

3. 位图像素

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

4. 设备像素比(简称dpr)

设备像素比 = 物理像素 / 设备独立像素(在某一方向上,x方向或者y方向)

5. scale

缩放比:

1

scale = 1/dpr

6. 完美视口

1

<meta name="viewport" content="initial-scale=1,width=device-width,user-scalable=0,maximum-scale=1" />

二、网易彩票设计方案

网易彩票

采用scale = 1.0写死viewport

采用媒体查询来确定html根元素的font-size值,即rem值

rem + 百分比布局

媒体查询的css代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//网易彩票的响应式布局是采用媒体查询来改变rem值实现的

//媒体查询css#media-query{

    @media screen and (min-width: 240px) {

        html,body,button,input,select,textarea {

            font-size:9px!important;

        }

    }

    @media screen and (min-width: 320px) {

        html,body,button,input,select,textarea {

            font-size:12px!important;

        }

    }

    @media screen and (min-width: 374px) {

        html,body,button,input,select,textarea {

            font-size:14px!important;

        }

    }

    @media screen and (min-width: 400px) {

        html,body,button,input,select,textarea {

            font-size:15px!important;

        }

    }

    // 省略

}

三、天猫设计方案

天猫首页

采用scale = 1.0写死viewport

不采用rem,body的font-size=14px写死

px + flexbox布局

四、遇到的问题

1. 高清屏下( dpr>1 )1px线模糊问题

大多数情况下,设计师产出各种尺寸的稿子,都是先画出大尺寸(一般2x)的稿子,再去缩小尺寸,最后导出。 这样会带来问题:如果设计师在2倍稿子里画了一条1px的线(例如border:1px),这时候假如我们要在scale=1.0里呈现的话,就会变成0.5px,而很大一部分手机是无法画出0.5px的。
理论上,1个位图像素对应于1个物理像素,图片才能得到完美清晰的展示。在普通屏幕下是没有问题的,但是在retina屏幕(dpr=2)下就会出现位图像素点不够,从而导致图片模糊的情况。

2. 高清屏下( dpr>1 )高清图片模糊问题

对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊(注意上述的几个颜色值)。所以,对于图片高清问题,比较好的方案就是采用两倍图片。如:200×300(css pixel)img标签,就需要提供400×600的图片。
对于dpr=2的retina屏幕而言,1个位图像素对应于4个物理像素,由于单个位图像素不可以再进一步分割,所以只能就近取色,从而导致图片模糊(注意上述的几个颜色值)。所以,对于图片高清问题,比较好的方案就是采用两倍图片。如:200×300(css pixel)img标签,就需要提供400×600的图片。

五、终极解决方案-->淘宝设计方案

淘宝首页

通过js处理获取手机dpr参数,然后动态生成viewpoint

获取手机物理像素宽度,分成10份,每一份的宽度即是rem的尺寸。

根据设计稿的尺寸(px)分三种情况进行处理,采用px + rem布局

相关的脚本如下:

阅读剩余部分

相关阅读 >>

Html文件中include文件内容应该如何使用

Html中必须掌握的知识点有哪些

Html中图像标签是什么意思

什么是Html元素?浅谈元素的语法规则

css比Html更复杂为什么还要用?

Html是什么的缩写

Html<p>标签是什么元素?关于Html p标签的定义和作用详解

Html input如何只能输入数字

Html和js实现简单的计算器

Html怎么设置文本框边框颜色

更多相关阅读请进入《Html》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...