實現響應式佈局的方法總結

時間 2019-12-06

標籤實現響應佈局方法總結简体版

原文原文鏈接

爲何要實現響應式佈局？css

目的：爲了網頁可以兼容不一樣的終端html

參考各類手機型號的分辨率前端

http://screensiz.es/phone 是一個前端開發者必備的一個網站，上面列出了市面上大部分常見機型的分辨率大小。css3

實現方法：web

1.設置meta標籤，禁止用戶縮放chrome

使用 viewport meta 標籤在手機瀏覽器上控制佈局，user-scalable屬性可以解決ipad切換橫屏以後觸摸才能回到具體尺寸的問題。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" user-scalable=no" />

經過快捷方式打開時全屏顯示
<meta name="apple-mobile-web-app-capable" content="yes" />

隱藏狀態欄
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone會將看起來像電話號碼的數字添加電話鏈接，應當關閉
<meta name="format-detection" content="telephone=no" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

2.經過媒介查詢來設置樣式Media Queries瀏覽器

Media Queries 是響應式設計的核心app

它根據條件告訴瀏覽器如何爲指定視圖寬度渲染頁面。假定一個終端的分辨率<980px,能夠這樣寫：iphone

直接在css文件上使用
@media screen and (max-width:980px) {
    #head {...}
    #content{ ... }
    #footer {...}
}
或者
<style media="screen and (min-width:340px) and (max-width:720px)">

　　　　　　　　body{　　　　佈局

　　　　　　　　background:rgb(16,136,65);

</style>

或者導入外文件
<link rel = "stylesheet" href = " " meida ="screen and (min-width:340px) and (max-width:720px)">

假設要兼容ipad和iphone視圖，咱們能夠這樣設置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px)and (width:768px){}

3.設置字體

rem是相對於根元素的，以前先重置根元素的大小

html{font-size:100%;}
完成後，你能夠定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}

4.寬度不固定，使用百分比

#head{width:100%;}
#content{width:50%;}

6.圖片處理

圖片液態化詳解：https://blog.csdn.net/qq_41485414/article/details/81061576

 #wrap img{
        max-width:100%;
        height:auto;
    }
    如此設置後ID爲wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height爲auto的設置是爲了保證圖片原始的高寬比例，以致於圖片不會失真。

設置背景圖

 #log a{display:block;
            width:100%;
            height:40px;
            text-indent:55rem;//縮進
            background-img:url(logo.png);
            background-repeat:no-repeat;
            background-size:100% 100%;
            }
    background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width,第2個值用於指定背景圖的height,若是隻指定一個值，那麼另外一個值默認爲auto。
    background-size:cover; 等比擴展圖片來填滿元素
    background-size:contain; 等比縮小圖片來適應元素的尺寸

7.表格的響應式佈局

舉個例子

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="index.css"/>
    <link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
    <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>
<body>
<div class="header">頭部</div>
<div class="main clearfix">
    <div class="left">左邊</div>
    <div class="center">中間</div>
    <div class="right">右邊</div>
</div>
<div class="footer">底部</div>
</body>
</html>

// index.css
*{
    margin:0;
    padding:0;
    text-align:center;
    color:yellow;
}

.header{
    width:100%;
    height:100px;
    background:#ccc;
    line-height:100px;
}
.main{
    background:green;
    width:100%;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
.left,.center,.right{
    float:left;
}
.left{
    width:20%;
    background:#112993;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.center{
    width:60%;
    background:#ff0;
    height:400px;
    color:#fff;
    font-size:50px;
    line-height:400px;
}
.right{
    width:20%;
    background:#f0f;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.footer{
    width:100%;
    height:50px;
    background:#000;
    line-height:50px;
}

//index01.css
.right{
    float:none;
    width:100%;
    background:#f0f;
    clear:both;
}
.left{
    width:30%;
}
.center{
    width:70%;
}
.main{
    height:800px;
}

//index02.css
.left,.center,.right{
    float:none;
    width:100%;
}

結果運行以下

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。