開拓眼界的方式有兩種,一是讀書,二是花錢。讀書,花最少的錢買別人的財富,你把孫子兵法背下來,孫子便跟你一輩子。花錢,行萬里路,閱人無數,畢竟對於人生來說,任何經驗都是有用的。
那,既然沒有錢,就好好讀書吧,哈哈
移動端自適應框架,響應式佈局,如何實現移動端不同分辨率的手機?在本文能夠詳解,響應式佈局是HTML5和css的結合是必然,但是很多朋友不知道怎麼實現不同分辨率下的手機端,具體如何實現不同分辨率呢,下面就來說說怎麼實現不同分辨率的響應式設計?
一、響應式佈局框架的優點、缺點、原理
響應式佈局的優點:
1.面對不同分辨率設備靈活性
2.能夠快捷解決多設備顯示適應問題
響應式佈局的缺點:
不能完全兼容所有瀏覽器,代碼累贅,加載時間加長。不明白響應式佈局該怎麼去做,以及它的開發原理是什麼的看看下面的響應式佈局的HTML代碼?
**原理:**簡單點說響應式佈局它是通過CSS中Media Query(媒介查詢)@media功能,來判斷我們的終端設備寬度在多少像素內,然後就執行與之對應的CSS樣式。
在網頁的中增加以下代碼,讓網頁的寬度自動適應手機屏幕的寬度
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
< meta name=“viewport” content=“width=device-width, initial-scale=1.0,minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />
width=device-width :表示寬度是設備屏幕的寬度 height=device-height :表示寬度是設備屏幕的寬度
initial-scale=1.0:表示初始的縮放比例(初始規模爲1.0倍,即原始大小)
minimum-scale=0.5:表示最小的縮放比例 maximum-scale=2.0:表示最大的縮放比例
user-scalable=yes或者1:表示用戶是否可以調整縮放比例(no或者0:表示不可調整縮放比例)
target-densitydpi:一個屏幕像素密度是由屏幕分辨率決定的,通常定義爲每英寸點的數量(dpi)。Android支持三種屏幕像素密度:低像素密度,中像素密度,高像素密度。一個低像素密度的屏幕每英寸上的像素點更少,而一個高像素密度的屏幕每英寸上的像素點更多。
Android Browser和WebView默認屏幕爲中像素密度。 下面是 target-densitydpi 屬性的 取值範圍
device-dpi –使用設備原本的 dpi 作爲目標 dp。 不會發生默認縮放。 high-dpi – 使用hdpi 作爲目標 dpi。中等像素密度和低像素密度設備相應縮小。 medium-dpi – 使用mdpi作爲目標 dpi。 高像素密度設備相應放大, 像素密度設備相應縮小。 這是默認的target density. low-dpi -使用mdpi作爲目標 dpi。中等像素密度和高像素密度設備相應放大。
< value> – 指定一個具體的dpi 值作爲target dpi. 這個值的範圍必須在70–400之間。
二、響應式佈局框架實現不同分辨率的HTML代碼框架
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>響應式佈局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{margin:0;padding:0;text-decoration:none;list-style:none;
font-size:14px;font-family:"微軟雅黑";text-align:center;
color:#fff;}
.clear{clear:both;}
#header,#content,#footer{margin:0 auto;margin-top:10px;}
#header,#footer{margin-top:10px;height:100px;}
#header,#footer,.left,.right,.center{background:#333;}
/*通用樣式*/
/*手機*/
@media screen and (max-width:600px){
#header,#content,#footer{width:400px;}
.right,.center{margin-top:10px;}
.left,.right{height:100px;}
.center{height:200px;}
}
/*平板*/
@media screen and (min-width:600px) and (max-width:960px){
#header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
}
/*PC*/
@media screen and (min-width:960px){
#header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;}
}
</style>
</head>
<body>
<!--header start-->
<div id="header">header</div>
<!--end header-->
<!--content start-->
<div id="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
<!--end content-->
<!--footer-->
<div id="footer">footer</div>
<!--end footer-->
</body>
</html>
解釋說明
它是通過@media媒介查詢判斷來執行的CSS樣式,也就是說:如果我要做一個響應式佈局網站,同時兼容手機、平板、PC的話就得寫三個與之對應的CSS樣式,通過@media媒介查詢來完成響應式佈局,手機設備上,我們要禁止用戶來縮放屏幕。不禁止的話,可能在顯示上會造成錯位,以及顯示的不是手機網站的樣式。所以,我們要通過代碼來禁止用戶在手機端上縮放屏幕,已達到正常的手機網站效果。代碼如下:
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
手機的屏幕尺寸
手機的屏幕尺寸有以下幾個規格,手機的品牌和型號不一樣,手機的屏幕尺寸也是不一樣的。
iPhoneX,5.8英寸,375x812像素7a686964616f31333431346464;
iPhone8+(8+,7+,6S+,6+),5.5英寸,414x736像素;
iPhone8(8,7,6S,6),4.7英寸,375x667像素;
iPhoneSE(SE,5S,5C),4英寸,320x568像素;
AndroidOne,4.5英寸,320x569像素;
GooglePixel,5英寸,411x731像素;
GooglePixelXL,5.5英寸,411x731像素;
MotoX,4.7英寸,360x640像素;
MotoX二代,5.2英寸,360x640像素;
Nexus5,5英寸,360x640像素;
Nexus5X,5.2英寸,411x731像素;
Nexus6,6英寸,411x731像素;
Nexus6P,5.7英寸,411x731像素;
SamsungGalaxyS8,5.8英寸,360x740像素;
SamsungGalaxyS8+,6.2英寸,360x740像素;
SamsungGalaxyNote4,5.7英寸,480x853像素;
SamsungGalaxyNote5,5.7英寸,480x853像素;
SamsungGalaxyS5,5.1英寸,360x640像素;
SamsungGalaxyS7(S7,S6,S6Edge),5.1英寸,360x640像素;
SamsungGalaxyS7Edge,5.5英寸,360x640像素;
SmartisanT2,4.95英寸,360x640像素;
SmartisanM1,5.15英寸,360x640像素;
SmartisanM1L,5.7英寸,480x853像素;
堅果Pro,5.5英寸,360x640像素;
OnePlus5,5.5英寸,360x640像素;
OnePlus3T,5.5英寸,360x640像素;
OppoR9s(R9s,R11),5.5英寸,360x640像素;
OppoR9sPlus(R9sPlus,R11Plus),6英寸,360x640像素;
OppoA57,5.2英寸,360x640像素;
OppoA59s,5.5英寸,360x640像素;
OppoA37,5英寸,360x640像素;
小米MIX2,5.99英寸,360x720像素;
小米MIX,6.4英寸,360x680像素;
小米Note3,5.5英寸,360x640像素;
小米Note2,5.7英寸,360x640像素;
小米6,5.15英寸,360x640像素;
小米5s,5.15英寸,360x640像素;
小米5sPlus,5.7英寸,360x640像素;
小米Max,6.44英寸,360x640像素;
紅米Note4(4,Note4X),5.5英寸,360x640像素;
紅米4(4,4X),5英寸,360x640像素;
VivoX9(X9,X9s),5.5英寸,360x640像素;
VivoX9Plus(X9Plus,X9sPlus),5.88英寸,360x640像素;
HUAWEIP10,5.1英寸,360x640像素;
HUAWEIP10Plus,5.5英寸,360x640像素。
我是樂樂呀,感謝您的閱讀。如果您覺得不錯,那就點個贊吧,您的支持是我最大的動力。謝謝😜