網頁佈局——響應式佈局

時間 2020-07-07

標籤網頁佈局響應欄目 HTML 简体版

原文原文鏈接

響應式佈局是一個網站可以兼容多個終端---而不是爲每一個終端作一個特定的版本css

@media all(用於全部的設備) || screen (用於電腦屏幕,平板電腦,智能手機等) and|not|only(三個關鍵字能夠選)html

 1 <head>
 2 <style media="screen">
 3     @media screen and (max-width:600px){
 4       .con{
 5         background:red;
 6       }
 7     }
 8     @media screen and (min-width:600px) and (max-width:800px){
 9       .con{
10         background:blue;
11       }
12     }
13     @media screen and (min-width:800px){
14       .con{
15         background:green;
16       }
17     }
18     .con{
19       width: 100%;
20       height: 100px;
21     }
22   </style>
23 </head>
24 <body>
25   <div class="con">
26         一個網站可以兼容多個終端---而不是爲每一個終端作一個特定的版本一個網站可以兼容多個終端---而不是爲每一個終端作一個特定的版本一個網站可以兼容多個終端---而不是爲每一個終端作一個特定的版本一個網站可以兼容多個終端---而不是爲每一個終端作一個特定的版本一個網站可以兼容多個終端---而不是爲每一個終端作一個特定的版本一個網站可以兼容多個終端---而不是爲每一個終端作一個特定的版本
27   </div>
28 </body>

1.meta 標籤chrome

最簡單的處理方式是加上一個 meta 標籤設置屏幕按1：1尺寸顯示，在 iPhone 和其餘智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。瀏覽器

其中，width = device-width 這一句的意思是讓頁面的寬度等於屏幕的寬度。iphone

1 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
2 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3 <meta name="HandheldFriendly" content="true">

2.經過媒體查詢設置樣式media query佈局

media query 是響應式設計的核心，它可以和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那麼能夠這樣寫:網站

1 @media screen and (max-width:980px){
2      #head { …; }
3      #content { …; }
4      #footer { …; }
5 }

意思就是：當屏幕的寬度大於等於 980 px 的時候 html 設置樣式。ui

rem 指的是 html 元素的 font-size，html 元素的 font-size 默認是 16px，因此 1 rem = 16px；而後根據 rem 來計算各個元素的寬高，而後配合 media query 就能夠實現自適應。spa

3.設置多種視圖scala

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

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

4.響應式設計須要注意的問題

　　4.一、寬度不固定，能夠使用百分比

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

　　4.二、在html頁面中的圖片，好比文章裏插入的圖片咱們均可以經過css樣式max-width來進行控制圖片的最大寬度，如：　

img{
    max-width:100%;
    height:auto;
}

相關標籤/搜索

每日一句

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