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.pswp.cn/news/256685.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/256685.shtml
英文地址，請注明出處：http://en.pswp.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