写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. 我是这样发现ISP劫持HTTP请求的

    编者按:Fundebug的客户通过分析我们提供的报警信息,定位了一个非常棘手的问题—ISP劫持http请求.他的分析过程非常有意思,同时也提醒我们,应该及时支持HTTPS来保证站点安全. 原文: IS ...

  2. win彩 百款皮肤任选任换.可视化

  3. LinkedBlockingDeque

    1.LinkedBlockingDeque public class LinkedBlockingDeque<E> extends AbstractQueue<E> imple ...

  4. 使用函数指针调用C++虚函数

    基本概念: 1. 函数指针,一个地址指针变量,其值指向代码区的某个函数首地址. 2. 虚函数,可以被子类覆写的C++成员函数.由虚函数表实现. 3. 虚函数表指针(vpt),指向虚函数表首地址的指针, ...

  5. centos修改无法用用户名和密码登录

    vi /etc/ssh/sshd_configPermitRootLogin这行改为PermitRootLogin yesPasswordAuthentication no上面的no改为yesUseP ...

  6. Java IO详解（六)------随机访问文件流

    File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ysocea ...

  7. 从 art-template 模版维护到动态加载的思考

    自己用 art-template 有些年头了,最近在培养团队学习 art-template 使用,发现有一个痛点比较难解决. 比如有一个模版,我们可以直接写在页面中,像这样: <script i ...

  8. wiringPi安装

    wiringPi安装   更新软件,输入以下指令:   sudo apt-get update   sudo apt-get upgrade   通过GIT获得wiringPi的源代码   git c ...

  9. 这 5 个前端组件库，可以让你放弃 jQuery UI

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 在建立Web应用时,通常都需要用到一些有用的UI组件.无论应用中需要的是日历,滑块,图形或其它用于提升或简化用户交互的组件,那么 ...

  10. 项目管理之 Objective-C 编码规范

    目录: 一.格式化代码 二.命名 命名要求 1. 类的命名: 规则: 大驼峰命名法,每个单词的首字母都采用大写字母.一般添加业务前缀.后缀一般是当前类的种类. ViewController:后缀:Vi ...