手機端自適應響應式框架,移動端響應式佈局代碼

開拓眼界的方式有兩種,一是讀書,二是花錢。讀書,花最少的錢買別人的財富,你把孫子兵法背下來,孫子便跟你一輩子。花錢,行萬里路,閱人無數,畢竟對於人生來說,任何經驗都是有用的。
那,既然沒有錢,就好好讀書吧,哈哈

移動端自適應框架,響應式佈局,如何實現移動端不同分辨率的手機?在本文能夠詳解,響應式佈局是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像素。

我是樂樂呀,感謝您的閱讀。如果您覺得不錯,那就點個贊吧,您的支持是我最大的動力。謝謝😜

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章