iphone6自适应布局_7个html5页面适配iphone6的技巧

已经有一段时间面世了。众多移动端网站，先前固定body宽度为320像素的，如今想必正忙于进行相应的适配工作。

大屏幕手机早已存在，然而过去并未受到广泛关注。移动端H5页面大多以320像素为标准宽度进行设计，那些使用大屏幕的用户也并未给予太多关注。然而，随着多屏幕技术的发展，企业主们对这一领域的重视程度也有了显著提升。

回归正题，兼容各版本机型最佳的方式就是自适应。

1、简单粗暴的方式：

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

为什么是1.3？

当前绝大多数网页设计均以320像素作为基础尺寸，其宽度比例计算为375除以320等于1，而414除以320的结果则为1.29375。

那么以1.29倍也就约等于1.3了。

2、ip6+的

针对屏幕宽度介于375像素至667像素之间，且像素密度至少为2的设备，该样式规则将生效。

/**/

针对屏幕宽度介于414像素至736像素之间，且像素比不低于3的设备，此样式规则将生效。

/**/

请直接指定具体的宽度值，例如：使用-width:375px。

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

3、REM布局

REM作为CSS3引入的一个新单位，其移动设备的兼容性相当出色，无论是.x+还是ios5+系统，均能良好支持。

REM单位是以相对于DOM结构的根元素来定义尺寸的，具体指的是html元素。与em单位相比，rem在理解和应用上更为简便。

REM与PX的换算可以查看网址：

如果我们在HTML中设定了字体大小为12像素，即12像素等同于1个rem单位，那么18像素换算成rem单位就是18除以12，结果为1.5rem。

以320像素为设计基准点，我们将HTML的字体大小设定为100像素，即100像素等同于1rem。之所以选择100像素，是为了便于计算。因此，大多数以像素为单位的数值，只需除以100，便可以直接转换为rem单位。

REM如何做响应式布局？

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

伪代码如下：

/*320px布局*/

html{font-size:100px;}

在body标签中，字体大小被设置为0.14rem，这实际上等同于14像素。

/**/

@media(min--width:375px)and(max--width:667px)and(--min--pixel-ratio:2){

html{font-size:117.;}

/**/

@media(min--width:414px)and(max--width:736px)and(--min--pixel-ratio:3){

html{font-size:129.375px;}

在IP6系统上，页面中的元素被扩大了1.17倍，而在IP6+系统上，这一比例则增加至1.29倍。

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

((doc,win){

=doc.,

=''?'':'',

=(){

=docEl.;

if(!);

docEl.style.=100*(/320)+'px';

};

//ener

if(!doc.);

win.(,,false);

doc.('',,false);

})(,);

在页面初始化阶段，首先进行font-size的计算，随后再进行事件的绑定操作。这样的处理方式与百分比布局产生的效果相似。

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

其显著特点在于对元素尺寸的精准调节。（通常，百分比在布局层面得到广泛应用，如50%、33.3%、25%等整数比例较为常见，但在处理页面上的复杂小部件时，这种比例就难以适用了。）

但是相比百分比布局，需要借助JS或实现，略有一点瑕疵。

DEMO地址

4、图片自适应

提及了REM布局之后，可以采用百分比布局来达到相似的效果，然而，采用百分比布局时，却不得不应对一个挑战：当图片宽度设置为100%时，页面在加载过程中可能会出现高度塌陷的现象。

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

公式如下：

-top=(/)*100%

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

相关代码实现：

.cover{:;-top:100%;:0;:;}

.{:;top:0;width:100%;}

DEMO地址，缩放浏览器窗口看看。

5、图片高清化

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

在iOS8系统中，已经实现了对img标签属性的兼容（目前仅iOS8及以上的移动操作系统支持此功能），这意味着，我们能够为一幅图像指定两个不同的网络地址，浏览器将自动根据条件加载相应的图片。

黄色标识代表仅适用于过往的标准，绿色标识则涵盖了最新规范，其中包含sizes属性以及w描述符等内容。具体细节不在此详述，如需深入了解，请自行查阅。

然而，目前在前端领域，图片的实现大多采用某种方法进行。这种图片加载方法在具体的项目应用中尚不普遍。

6、背景图高清化

实现高清化

使用可以实现img标签的画质提升，它能根据特定值加载相应尺寸的图像；然而，对于背景图而言，若在CSS中定义，用JS进行判断则会显得较为复杂。不过，幸运的是，CSS同样能够识别设备的像素比（dpr）。

目前兼容性最好的背景图高清化实现方式，使用的

--min--pixel-ratio做判断：

/*普通显示屏(设备像素比例小于等于1)使用1倍的图*/

.css{

-image:url(.png);

/*高清显示屏(设备像素比例大于等于2)使用2倍图*/

@(--min--pixel-ratio:2){

.css{

-image:url(.png);

/*高清显示屏(设备像素比例大于等于3)使用3倍图*/

@(--min--pixel-ratio:3){

.css{

-image:url(.png);

更进一步，我们能够借助工具自动生成尺寸为3x、2x、1x的图片以及相应的CSS样式，使用时只需直接引用即可。有谁愿意来尝试一下吗？

关于移动设备的

您可以查阅该网页提供的整理资料，以了解min--pixel-ratio值的相关信息。

image-set实现高清化

image-set，这一属性属于其自身，亦为CSS4的一部分，其设计初衷是为了应对屏幕下方图像的展示需求。

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

.css{

当不支持使用image-set属性时，请使用此样式规则，指定图片的URL为1x.png；，以此作为备选方案。

:--image-set(

支持image-set功能的浏览器，可以识别并使用url(1x.png)1x这一资源。

普通屏幕

下*/

该链接指向名为“2x.png”的图片，其尺寸为2倍，适用于支持使用image-set功能的浏览器。

2倍屏幕

*/

支持使用image-set功能的浏览器，可访问url(3x.png)中的3x版本图片。

3倍屏幕

*/

);

就目前移动设备兼容性而言，iOS系统从7版本及以上，以及系统从4.4版本及以上均实现了支持。若仅是为了 6及以上型号的高清显示适配，采用image-set技术同样可以作为一个有效的解决方案。

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

这篇文章里面做了很详细的阐述，大家可以看看：

image-set并不需要告知浏览器具体使用哪张图像，而是直接向其提供了可供选择的图像选项。这样一来，当网络速度较慢时，浏览器便能够自主决定加载较低分辨率的图片。真是相当智能呢！（PS：感觉挺聪明的样子）

然而，相较于全面实现的功能，image-set仅能处理单一图片的高清化，并不适合在此场景下应用。此外，其兼容性问题同样不容忽视。

通常而言，在LOGO区域，特别是在独立图片图标占据的空间内，这样的选择也是相当适宜的。

7、图片列表的自适应

在讨论适配性的问题时，这主要是指使布局更加灵活多变，特别是在电子商务网站中，商品列表这一结构尤为普遍。

一种比较智能的列表方式是：两端对齐，间距自适应。

可以实现两端对齐的布局效果，同时还可以通过设置text-align属性来达成这一目的。

先看个flex实现的例子，主要通过

-:space-，来实现：

在PC端，这种布局模式并不适宜，尤其是对于IE9及以下版本，它并不兼容。因此，我们可以考虑采用text-align属性来调整，这样能够确保在众多主流浏览器中，包括IE6在内，都能实现良好的兼容性。

然而，这两种布局模式各自存在一定的限制。具体来说，列表中的项目数量需要达到整数。目前尚未发现一种能够适应任意数量项目的解决方案。若各位读者有更优的实现方法，不妨提出，让我们共同探讨。

针对移动端IP6的适配，存在多种适配方案，并无一成不变的规律可循。需依据自身业务的具体情况，挑选若干种方法进行灵活搭配运用。