写H5页面一直写的有点随意,只是保证了页面在各个屏幕下显示良好,却没有保证到在各个屏幕下是等比例放大或者缩小.这些天在写一些页面,试着看看能不能写出等比例放大缩小的页面,发现不容易啊,在网上找了一些文章,整理如下:

(只说方案,具体实现看大神的文章)

方法一:用流式布局,px做css单位,在大屏小屏自动适应,我之前一直用这种方法,适合于简单的页面,比如说列表页,写法比较简单,不用考虑太多

缺点是:
1.页面虽然展示正常,却不是等比缩放,在高清屏上难免看起来怪怪的(px换算统一除以2,在dpr是2.5或者3上看起来偏小)
方法二:用rem布局.
rem:css单位,相对于网站根元素,即根据html元素的font-size来计算大小,比如说html的font-size大小为50px,一个div的width为1rem,则div的width大小为50px,所以在不同屏上,只要我们动态的算出html的大小,则可起到一改俱改的效果,实现等比例放大缩小,因为html的font-size是等比算出来的.
这里有一个需要注意的,用rem布局,可以起到等比例放大缩小的效果,但有时我们难免要对某个元素在不同屏上做一些特定的处理,我们马上就想起了媒体查询,是的,你如果单纯用rem布局,没有去动态修改viewport的缩放值(后面讲的淘宝的方案是动态修改viewport的缩放值),那是可以用媒体查询的,那么除了用媒体查询还有没有其他方法呢?答案是有的,根据dpr,我们在不同屏动态算出html的font-size时,顺便把dpr算出来加到html里面去,这样我们可以通过css去控制,
如下:
<html lang="en" data-dpr="1" style="font-size: 32px;">
然后,css里可以这样写:
[data-dpr="1"] div{ //处理代码 }
这就是我们经常在h5页面看到,为什么用rem布局还要动态设置这个data-dpr的原因,可以给css处理不同dpr留下钩子.用rem布局做css单位,很多时候我们元素div的font-size是不需要用rem的,我们还是想用px给文字设置大小,这个时候这个钩子就显得很 有用了.
这里涉及到怎么把设计稿的px换算成rem,网上有很多详细的教程,链接在后面.
方法三:淘宝的lib-flexible方案
淘宝的这个方案,是rem布局+viewport设置(iOS),就是在iOS系统上,动态的设置viewport,如下:
iphone5
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
iphone6 plus
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
在iOS上,这种方案真的不错,解决了很多问题,1px的问题也解决了,具体实现方案后面放链接.
但是在安卓上呢?淘宝的这种方案在安卓是统一设置viewport的缩放为1的,因为安卓机上这个值设置了不一定有效,比如说0.5或者0.333,安卓机上可能都会解析为1
这个时候怎么处理呢?我们可能会想,反正安卓上dpr都是1,而苹果上dpr现在至少都是2,那么我们可以根据这个来做区分,
[data-dpr="1"] div{ //处理代码 }
这样确实可以做区分,但是有一个问题我们没考虑到,就是安卓机上也有高清屏的,这么说,我们在dpr=1设置了1px,在ios上自动缩放,可能显示0.5或者0.333,但是在安卓机上呢?在大部分dpr等于1上显示1px,但是在那些高清安卓机上呢?显示的是2px甚至3px,这个时候应该怎么处理?
理一下:这个时候的问题是,ios上都没问题了,1px也很细,但是安卓上,1px还是很粗,可以怎么办呢?大部分安卓机并没有像苹果那样的retina屏,所以在大部分情况下我们会对这个问题忽略,即ios上显示细的1px,而android上显示的相对粗一些.
当然,如果安卓上也一定要跟ios上显示一样细,也可以有其他方法,这个可以查看H5页面1PX的实现,有很多种方案,比如通过伪元素来缩放,背景实现,抑或是图片实现等等.网上有很多相关文章.
用淘宝这个方案,有个注意点:
用了淘宝这个方案,是不能用媒体查询的,比如说在ipone6上,body的宽度是750,在ipone6 plus上,body的宽度是1000+,这样我们应用媒体查询时,某个应用到1000+的样式,就会应用到ipone6 plus上(这情况不是bug,是正常的情况,跟viewport有关).
如果我们不是用淘宝的这套方案,那么ipone6上,body的宽度是375,在ipone6 plus上,body的宽度是414,这样我们应用媒体查询时,某个应用到1000+的样式,就不会应用到ipone6 plus上.
虽然不能用媒体查询,但是可以用dpr查询,如下
@media only screen and (-webkit-min-device-pixel-ratio:1.5){ //处理代码  }

我们也可以配合data-dpr来处理,如下:

@media only screen and (-webkit-max-device-pixel-ratio:3){

    [data-dpr="1"] body{

    }

}
 
综上,我们总结下:
1.当我们做的H5页面是单纯的web app,跟PC不是同一套时,即我们不需要用到媒体查询时,我们可以用淘宝这个方案,这个方案解决了ios上高清屏的问题,而且可以像我们平时写css代码一样,很方便,只是编写过程中就是换算有点麻烦(有工具);
2.虽然说简单的页面我们可以用流式布局,但是能做到等比例放大缩小就更好了,所以建议H5用rem布局;
3.安卓上如果一定要实现细的1px,需要使用其他方法来实现,比如上面说的伪元素缩放,背景实现,图片实现等等.
 
文章相关链接
 
 
欢迎交流,有错请指出,谢谢!

web移动端布局方式整理的更多相关文章

  1. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...

  2. 移动 WEB 开发的布局方式 ---- 响应式布局

    一.响应式简介 一个页面布局兼容了 PC端 ,iPad端 和 移动端 所谓的响应式就是页面中的布局会随着屏幕的大小变化发生了响应而做出不同的页面布局模型 特点: 响应式布局是不需要单独写移动端页面的 ...

  3. Web移动端布局

    说到移动端,不得不提适配问题,因为现如今市面上移动设备的分辨率大小不同,显然咱们常用的px单位在这个时候就有些不太灵光了,为此,css3出了一个新单位——rem,rem是移动端神器,它完美解决了分辨率 ...

  4. 【转载】Web移动端Fixed布局的解决方案

    特别声明:本文转载于EFE的<Web移动端Fixed布局的解决方案>.如需转载,烦请注明原文出处:http://efe.baidu.com/blog/mobile-fixed-layout ...

  5. Web页面布局方式小结

    Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...

  6. web网页 页面布局的几种方式（转）

    web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...

  7. 移动端布局 - REM方式

    默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...

  8. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_flex布局

    移动web开发--flex布局 1.0 传统布局和flex布局对比 1.1 传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广 ...

  9. 前端开发周报: CSS 布局方式方式与JavaScript数据结构和算法

    前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http: ...

随机推荐

  1. java文件的读写操作

    java文件的读写操作主要是对输入流和输出流的操作,由于流的分类很多,所以概念很容易模糊,基于此,对于流的读写操作做一个小结. 1.根据数据的流向来分: 输出流:是用来写数据的,是由程序(内存)--- ...

  2. coding.net及git的使用方式

    一般部分测试的公司里可能会用到代码管理工具,这里可能不得不推荐coding.net和git这个工具,类似于svn,不过用命令行的情况多点 这里简单介绍下 1.建立coding.net 首先新建一个co ...

  3. Java (PO,VO,DAO,BO,POJO,DTO) 几种对象解释

    1. PO:persistant object 持久对象 可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对 ...

  4. Django项目部署到Apache服务器

    本文讲述的是在阿里云服务器(ECS)上部署Django项目于Apache,服务器操作系统为ubuntu,公网Ip地址为123.56.30.151. 将Django部署到Apache服务器的原因 Dja ...

  5. windows下命令行cmder工具

    windows下系统自带的命令行工具,实在是太丑了,输入命令后,有时排版乱七八糟,而且使用惯liunx系统的命令后,实在是不能够接受,这么蹩脚的工具:为此我给大家推荐一款实用的开源工具cmder 下载 ...

  6. 如何升级php版本---从php5.5.12 升级php7.1.5 wamp实践

    1.从官网下载一个php7.1.5 2.将刚下载的压缩包解压缩,修改命名为php7.1.5,即php+版本号. 3.将这个文件夹放在wamp/bin/php 目录下. 4.将原来版本的php5.5.1 ...

  7. Day1-用户输入及字符串格式化输入

    1.用户输入--input和getpass函数 2.字符串的格式化 ############################################# 一.用户输入--input()函数 #! ...

  8. C#基础篇--静态成员、抽象成员、接口

    1.静态成员: 静态成员(static).静态类与实例成员.类: 静态成员属于类所有,非静态成员属于类的实例所有. 静态成员不能标记为 Virtual,Abstract,Override,也就是说静态 ...

  9. 自己动手实现html去标签和文本提取

    随意观看 [TOC] 工具 python3.6 正则表达式(别的语言思路一样,容易借鉴) python正则表达式:flags的应用 这里主要介绍一下re.compile(pattern[, flags ...

  10. Java File类应用：递归遍历文件夹和递归删除文件

    要求: 1)采用递归遍历文件夹下的所有文件,包括子文件夹下的文件 2)采用递归删除文件下的所有文件 注意: 以下递归删除文件的方法,只能删除文件,所有的文件夹都还会存在 若要删除正文文件夹,可以在递归 ...