H5页面适配所有iPhone和安卓机型的六个技巧

1、viewport 简单粗暴的方式：

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

直接设置viewport为320px的1.3倍，将页面放大1.3倍。

为什么是1.3？

目前大部分页面都是以320px为基准的布局，而iphone6的宽度比是375/320 = 1.171875，iphone6+则是 414/320 = 1.29375那么以1.29倍也就约等于1.3了。
2、ip6+ 的CSS media query

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){/*iphone 6*/
}@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){/*iphone 6 plus*/
}

PS: 也可以直接使用实际的device-width：如 device-width : 375px

在原有页面的基础上，再针对相应的屏幕大小单独写样式做适配。
3、REM布局

REM是CSS3新增的一种单位，并且移动端的支持度很高，android2.x+，ios5+ 都支持。REM是相对于dom结构的根元素来设置大小，也就是html这个元素。相较于em单位，rem使用上更容易理解及运用。

REM与PX的换算可以查看网址： https://offroadcode.com/prototypes/rem-calculator/

假设，html我们设置font-size:12px; 也就是说12px相对于1rem，那么18px也就是 18/12 = 1.5rem。

那么我们以320px的设计布局为基准，将html设置为font-size:100px，即100px = 1rem。(设置100px是为了方便计算)那么可以将大部分px单位除以100就可以直接改成rem单位了。

REM如何做响应式布局？

 

1、如果仅仅是适配ip6+设备，那么使用media query就行。

伪代码如下：

/*320px布局*/
html{font-size: 100px;}
body{font-size: 0.14rem /*实际相当于14px*/}/* iphone 6 */
@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){html{font-size: 117.1875px;}
}
/* iphone6 plus */
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){html{font-size: 129.375px;}
}

这样，在ip6下，也就将页面内的元素放大了1.17倍，ip6+下也就是放大了1.29倍。

 

2、如果是完全自适应，那么可以通过JS来控制。

(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';};// Abort if browser does not support addEventListenerif (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

页面初始化的时候计算font-size，然后再绑定resize事件。这种效果就和百分比布局一样了。

那么用REM做单位与百分比做单位有什么优势？

主要优势在于能更好的控制元素大小。（一般百分比应用在布局层，一般常见设置为50%，33.3%，25%之类的整数居多，难以运用在复杂的页面小部件内）。但是相比百分比布局，需要借助JS或media query实现，略有一点瑕疵。

 

4、图片自适应

刚说完REM布局，那么用百分比布局也能实现一样的效果，但是用百分比布局，必须要面临一个问题：图片宽度100%，页面加载时会存在高度塌陷的问题。.

如图：页面加载时图片高度默认不存在。

那么可以用padding-top设置百分比值来实现自适应。

公式如下：

padding-top = (Image Height / Image Width) * 100%

原理：padding-top值为百分比时，取值是是相对于宽度的。

相关代码实现：

<div class="cover"><img src="http://g.ald.alicdn.com/bao/uploaded/i1/TB1d6QqGpXXXXbKXXXXXXXXXXXX_!!0-item_pic.jpg_160x160q90.jpg" alt=""/>
</div>
.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}

 

5、图片高清化

大家都知道，iphone6 plus 是3倍高清图了，它的devicePixelRatio = 3。

关于DPR的介绍可以查看这篇文章《 设备像素比devicePixelRatio简单介绍 》

在ios8下，已经开始支持img的 srcset 属性了（目前移动端也就ios8开始支持），也就是说，可以对一张图片设置2个URL，浏览器自动加载对应的图片。

 

 

黄色表示仅支持旧的srcset规范，绿色表示支持全新的srcset规范，包括sizes属性，w描述符。 这里不展开，详细了解可自行google。

如下DEMO，请切换devicePixelRatio值进行查看：

 

不过目前前端这边图片的实现基本都用lazyload的方式实现。srcset的图片加载方式在实际项目中运用还比较少。

 

 

6、背景图高清化

media query 实现高清化

img标签的高清化，可以通过JS判断devicePixelRatio的值来加载不同尺寸的图片，但是对于背景图，写在CSS中的，用JS来判断就略麻烦了，还好CSS通过media query也能判断dpr。

目前兼容性最好的背景图高清化实现方式，使用media query的 -webkit-min-device-pixel-ratio 做判断：

/* 普通显示屏(设备像素比例小于等于1)使用1倍的图 */.css{background-image: url(img_1x.png);}/* 高清显示屏(设备像素比例大于等于2)使用2倍图  */@media only screen and (-webkit-min-device-pixel-ratio:2){.css{background-image: url(img_2x.png);}}/* 高清显示屏(设备像素比例大于等于3)使用3倍图  */@media only screen and (-webkit-min-device-pixel-ratio:3){.css{background-image: url(img_3x.png);}}

进一步，可以通过工具生成相应的3x，2x，1x的图片及css，在使用时直接引用即可。谁搞一个？

关于移动设备的 -webkit-min-device-pixel-ratio 值，可以查看该网页的整理： http://bjango.com/articles/min-device-pixel-ratio/

image-set 实现高清化

image-set，它是Webkit的私有属性，也是Css4的一个属性，它是为了解决Retina屏幕下的图像显示而生。

使用方式也很简单。伪代码如下：

.css {background-image: url(1x.png);    /*不支持image-set的情况下显示*/background: -webkit-image-set(url(1x.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */url(2x.png) 2x,/* 支持image-set的浏览器的[2倍Retina屏幕] */url(3x.png) 3x/* 支持image-set的浏览器的[3倍Retina屏幕] */);}

目前移动端的支持程度来看，ios7+，android 4.4+ 下已经支持了。如果仅仅是做ip6+的高清适配方案。 image-set 也是一种实现方案。

 

使用image-set 与 media query 实现有什么区别及好处？

这篇文章里面做了很详细的阐述，大家可以看看：http://blog.cloudfour.com/safari-6-and-chrome-21-add-image-set-to-support-retina-images/

 

大体的意思是：image-set不需要告诉浏览器使用什么图像，而是直接提供了图像让浏览器选择。这就意味着，如果在低网速下，浏览器可以选择加载低分辨率的图片。（PS：好智能的样子）

但是相比如media query的实现，image-set仅支持单个图片的高清化，不适合在css sprite下使用。 并且兼容性也是一大硬伤。

一般来说，用在LOGO区域，单个图片图标的区域下，也是个不错的选择。

 

关于图片列表适配，也就是要让布局更灵活，在电商网站里面，商品列表是一个非常常见的结构。一种比较智能的列表方式是：两端对齐，间距自适应。

那么可以使用FLEXBOX布局来实现两端对齐的效果，也可以使用 text-align:justify 的方式实现。

具体实现办法：http://www.ghugo.com/inline-block-justify/

转载于:https://www.cnblogs.com/wcn123456/p/7838175.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/256685.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

最优化作业第6章——无约束多维非线性规划方法

最优化作业第6章——无约束多维非线性规划方法

代码&#xff1a; #导入模块 from sympy import * import sympy as sp #将导入的模块重新定义一个名字以便后续的程序进行使用 from numpy import * import numpy as np#定义主要的处理函数 def main():#x1,x2&#xff1a;目标函数变量&#xff1b;alpha&#xff1a;步长因子…
阅读更多...
linux的进程与库之间的通信两种方式

linux的进程与库之间的通信两种方式

文章目录前言一、进程A与算法库b的通信方式之一&#xff1a;动态dlopen加载算法库b&#xff0c;编译的时候是需要加载该头文件就可以&#xff0c;无需连接该算法库b具体的实施细节&#xff1a;二、进程A与算法库b的通信方式之二&#xff1a;进程A编译的时候连接上算法库b和该头…
阅读更多...
Day03——类、值和对象

Day03——类、值和对象

1.js数字-NaN和Infinity 1、在js中&#xff0c;有一种特殊的数值&#xff0c;叫做NaN&#xff08;Not a Number&#xff09;&#xff0c;表示本来要返回数值的操作却未返回数值的情况&#xff0c;例如0除以0的操作&#xff0c;在其它语言中会报错误或异常&#xff0c;而在js中&…
阅读更多...
ASIHTTPRequest详解 [经典3]

ASIHTTPRequest详解 [经典3]

大文件断点续传 0.94 以后支持大文件的断点下载&#xff0c;只需要设置&#xff1a; [ request setAllowResumeForFileDownloads:YES ]; [ request setDownloadDestinationPath:downloadPath ]。 就可以了。 ASIHTTPRequest会自动保存访问过的&#xff35;&#xff32;&#xf…
阅读更多...
python矩阵相关操作

python矩阵相关操作

1.创建mxn的矩阵 import numpy as np from numpy import *x np.array([[2,1],[1,2],[2,2])#创建了一个3x2的数组 x np.mat(x)#将数组转化为矩阵2.数组与矩阵的转化 from numpy import * import numpy as np#数组转化为矩阵 matrix np.mat(array)#矩阵转化为数组 array ma…
阅读更多...
关于F5的一些基础话题

关于F5的一些基础话题

负载均衡器通常称为四层交换机或七层交换机。四层交换机主要分析IP层及TCP/UDP层&#xff0c;实现四层流量负载均衡。七层交换机除了支持四层负载均衡以外&#xff0c;还有分析应用层的信息&#xff0c;如HTTP协议URI或Cookie信息。一、F5配置步骤&#xff1a;1、F5组网规划(1)…
阅读更多...
传输协议上的字节解析问题

传输协议上的字节解析问题

1、 低字节在前&#xff0c;高字节在后 2、0x01高字节 &#xff0c; 0x00 低字节&#xff0c;如何组合成一个字节 3、0x01 0000 0000 0000 0001 4、0x00 0000 0000 0000 0000 5、按照组合规则&#xff0c;低字节在前&#xff0c;高字节在后组合成的新数据 6、0x01 0x00 0x0…
阅读更多...
POJ C++程序设计 编程题＃7：字符串排序

POJ C++程序设计 编程题＃7：字符串排序

编程题&#xff03;7&#xff1a;字符串排序 来源: 北京大学在线程序评测系统POJ (Coursera声明&#xff1a;在POJ上完成的习题将不会计入Coursera的最后成绩。) 总时间限制: 1000ms 内存限制: 1024kB 描述 请按照要求对输入的字符串进行排序。 #include <iostream> #inc…
阅读更多...
Delphi格式化函数Format、FormatDateTime和FormatFloat详解

Delphi格式化函数Format、FormatDateTime和FormatFloat详解

转自&#xff1a;http://outofmemory.cn/code-snippet/7631/Delphi-format-hua-function-Format-FormatDateTime-FormatFloat-explainindetail 1.Format 根据指定所需要的格式&#xff0c;格式化字符串。 原型&#xff1a; function Format(const Format: string const Args: a…
阅读更多...
OSPF地址汇总配置

OSPF地址汇总配置

配置过程在R1上&#xff1a;1. 给 Loopback 0 接口分配IP。2. 给ethernet 0/0 接口分配 IP3. 开启OSPF路由协议&#xff0c;进程号为110&#xff0c;并宣告直连网段。在R2上&#xff1a;1. 给ethernet 0/0 接口分配 IP2. 开启OSPF路由协议&#xff0c;进程号为110&#xff0c;并…
阅读更多...
论文写作与学术规范课堂笔记01——4.30

论文写作与学术规范课堂笔记01——4.30

论文质量的判断标准 &#xff08;原创&#xff09;创新性&#xff1a;观点、方法、材料 写作质量&#xff1a;逻辑性、语言清晰、数学数据、格式、数据可视化 论文写作的提升路径 模仿 经验
阅读更多...
requirejs学习之-- 初始化（一）

requirejs学习之-- 初始化（一）

为了规范在项目中使用的javascript代码&#xff0c;我们使用了requirejs框架。 初始阶段&#xff0c;我们在按钮的点击事件中调用创建的模块&#xff0c;代码如下&#xff1a; function button_click() {_this this;var args _this["Command_Params"] || (_this.co…
阅读更多...
ROS系统中的多个版本Boost问题

ROS系统中的多个版本Boost问题

1、删除多余的boost版本&#xff0c;只需要删除该版本的libboost*库以及Boost的头文件&#xff0c;不需要使用sudo apt-get rm --pugre libboost-dev sudo apt-get armove libboost-dev;这种卸载会把很多Boost依赖的库删掉&#xff1b;想要单纯的只删除当前版本的Boost库&#…
阅读更多...
iOS的通知

iOS的通知

首先,什么是通知呢,通知跟代理的功能是一样的,都是传值,调方法,但是我个人觉得通知比代理还是要简便的,而且功能更强大,如果你代理弄懂了,那么通知也就非常容易理解了,我认为通知比代理书写更容易,而且功能更强大.代理是一对一传值,但是通知可以一对多或多对多,好了不多说了给大…
阅读更多...
ValueStack基础：OGNL

ValueStack基础：OGNL

ValueStack基础&#xff1a;OGNL 要了解ValueStack&#xff0c;必须先理解OGNL(Object Graphic Navigatino Language)&#xff01; OGNL是Struts2中使用的一种表达式语言&#xff0c;它可以用于JSP的标签库中&#xff0c;以便能够方便的访问各种对象的属性&#xff1b;它用于界…
阅读更多...
常用的机械工具

常用的机械工具

阅读更多...
4.H - 组合

4.H - 组合

题目连接&#xff1a;http://acm.hust.edu.cn/vjudge/contest/125308#problem/H 题目大意&#xff1a;下面是一个二人小游戏&#xff1a;桌子上有M堆扑克牌&#xff1b;每堆牌的数量分别为Ni(i1…M)&#xff1b;两人轮流进行&#xff1b;每走一步可以任意选择一堆并取走其中的任…
阅读更多...
结构体指针需要申请指针内存，结构体对象不需要申请对象内存

结构体指针需要申请指针内存，结构体对象不需要申请对象内存

struct frame_info { char* data;//图像数据 int bufsize;//图像大小 }&#xff1b; 1、struct frame_info* finfoDT new struct frame_info; finfoDT->data new 1280*720 2、struct frame_info finfoDT new struct frame_info; finfoDT.data new 1280*720
阅读更多...
图论——连通图

图论——连通图

Tyvj 2059 元芳看电影 描述 神探狄仁杰电影版首映这天&#xff0c;狄仁杰、李元芳和狄如燕去看电影。由于人实在是太多了&#xff0c;入场的队伍变得十分不整齐&#xff0c;一个人的前面可能会出现并排的好多人。“元芳&#xff0c;这队伍你怎么看&#xff1f;”“大人&#xf…
阅读更多...
linux-ftools查看Linux 的cached里面有哪些内容

linux-ftools查看Linux 的cached里面有哪些内容

最近&#xff0c;公司有几台java服务器经常出现can not allocate memory 的情况。导致SSH登录失败。 因此&#xff0c;有必要做点什么。 我们可以使用linux-ftools查看Linux 的cached里面有哪些内容&#xff08;工具: https://code.google.com/p/linux-ftools/&#xff09;&…
阅读更多...
最新文章

Copyright @ 2022~2023