手机端自适应响应式框架，移动端响应式布局代码

最新推荐文章于 2024-07-24 22:55:41 发布

乐乐呀168

最新推荐文章于 2024-07-24 22:55:41 发布

阅读量2k

点赞数 5

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_43009710/article/details/105394630

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

开拓眼界的方式有两种，一是读书，二是花钱。读书，花最少的钱买别人的财富，你把孙子兵法背下来，孙子便跟你一辈子。花钱，行万里路，阅人无数，毕竟对于人生来说，任何经验都是有用的。
那,既然没有钱，就好好读书吧，哈哈

移动端自适应框架，响应式布局，如何实现移动端不同分辨率的手机？在本文能够详解，响应式布局是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像素。