媒體查詢及響應式佈局

時間 2019-12-09

標籤媒體查詢響應佈局简体版

原文原文鏈接

一.媒體查詢css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7     div{
 8         width: 1200px;
 9         height: 600px;
10         margin:0 auto;
11         background:red;
12         border:10px solid blue;
13     }
14     @media screen and (max-width:960px){
15         div {
16         width:800px;
17         height:400px;
18         background:purple;
19         border:20px solid gray;
20     }
21     @media screen and (max-width: 400px){
22         div{
23             width: 400px;
24             height: 300px;
25             background: black;
26             border: 20px solid pink;
27         }
28     }
29 }    
30     </style>
31 </head>
32 <body>
33     <div></div>
34     <!-- 
35         例子:
36         @media screen and (當屏幕發生變化,最大寬度達到某一個值的時候 好比:max-width:960px){會執行如下代碼
37         div {
38         width:800px;
39         height:400px;
40         background:purple;
41         border:20px solid gray;
42     }
43 }    
44 舒適小提示:and兩則都得有空格,不然很差使
45      -->
46 </body>
47 </html>

二.viewporthtml

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
 6     <title>果子精</title>
 7     <style type="text/css">
 8     div{
 9         font-size: 40px;
10     }
11     </style>
12 </head>
13 <body>
14     <!-- 
15         <meta name="viewport" content="device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
16 
17           width: 控制viewport的大小,能夠制定一個數值或一個特殊的值
18                如:device-width就是設備的寬度(單位爲縮放100%的css像素)
19 
20            initial-scale:
21                 初始縮放,就是頁面開始縮放的程度,是一個浮點數
22                    例如:initial-scale=1.0,頁面開始的時候,就是1:1的比例
23            maximum-scale=1.0,minimum-scale=1.0
24               最大縮放和最小縮放,容許放大或縮小多少倍
25 
26             user-scaleable=no
27                是否容許用戶調整頁面(yes or no),若是爲no
28                用戶不能縮放--maximum-scale=1.0,minimum-scale=1.0 會失效
29      -->
30     <div>果子</div>
31 </body>
32 </html>

三.響應式佈局佈局

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>響應式佈局</title>
 6     <style type="text/css">
 7          div{
 8              width: 80%;
 9              height: 300px;
10              background: purple;
11              padding-left: 10%;
12              margin: 0 auto;         
13          }
14          @media screen and (max-width: 800px){
15              div{
16             height:400px;
17              }
18          }
19     </style>
20 </head>
21 <body>
22     <!--
23         響應式佈局
24 
25            佈局百分比
26                width
27                padding-left
28                padding-right
29                margin-left
30                margin-right 
31                left
32                right
33 
34               須要牢記的公式
35 
36                    目標元素的寬度 /父級元素的寬度=百分比寬度
37               舒適小提示:
38                   如下樣式的的增長或者減小須要配合媒體查詢
39                      height
40                      padding-top
41                      padding-bottom
42                      margin-top
43                      margin-bottom
44                      top
45                      bottom
46            圖片百分比
47               圖片的寬度和高度比較彈性化
48             圖片若是不設置寬度和高度,會原始顯示,當設置了圖片的寬度百分比時,寬度發生變化,高度也會等比縮放
49 
50          舒適小提示,圖片有時候太大,會超出,最好設置一個上限值,max-width 或者max-height
51            文字百分比
52             em 和 rem
53             em相對與父級大小的倍數,父級文字大小是多少,決定子級文字em的大小
54 
55             rem 針對html文字字體大小
56             通常響應式佈局都用rem,經過媒體查詢改變html的文字大小,就能夠改變總體全部的頁面中的文字大小
57 
58            響應式佈局的優勢:等比例縮放時,完整顯示
59      -->
60      <div></div>
61 </body>
62 </html>

四.圖片百分比字體

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleable=no">
 6     <title>圖片百分比</title>
 7     <style type="text/css">
 8         body{
 9             margin: 0;
10         }
11         html,body{
12             width: 100%;
13             height: 100px;
14         }
15         div{
16             width: 80%;
17             margin: 0 auto;
18             overflow: hidden;
19         }
20         span{
21             float: left;
22             width: 24%;
23             margin-right: 1%;
24             margin-top: 5px;
25         }
26         img{
27             width: 100%;
28             /*max-width: 300px;*/
29         }
30         @media screen and (max-width: 600px) {
31             span{
32                 width: 49%;
33                 margin-top: 10px;
34             }
35         }
36     </style>
37 </head>
38 <body>
39     <!-- 
40         圖片的寬度和高度比較彈性化
41             圖片若是不設置寬度和高度,會原始顯示,當設置了圖片的寬度百分比時,寬度發生變化,高度也會等比縮放
42 
43          舒適小提示,圖片有時候太大,會超出,最好設置一個上限值,max-width 或者max-height
44      -->
45     <div>
46        <span>
47              <img src="D:/照片大全/我女神/盛世美顏.jpg">
48        </span>
49        <span>
50              <img src="D:/照片大全/我女神/盛世美顏.jpg">
51        </span>
52        <span>
53               <img src="D:/照片大全/我女神/盛世美顏.jpg">
54        </span>
55        <span>
56               <img src="D:/照片大全/我女神/盛世美顏.jpg">
57        </span>
58     </div>
59 </body>
60 </html>

五.文字百分比spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文字百分比</title>
 6     <style type="text/css">
 7     html{
 8         font-size: 40px;
 9     }
10     div{
11         font-size: 30px;
12         color: red;
13     }
14     span{
15         font-size: 2em;
16         color: yellow;
17     }
18     a{
19         font-size: 2rem;
20     }
21     @media screen and (max-width: 900px) {
22         html{
23          font-size: 20px;
24         }    
25     }
26     </style>
27 </head>
28 <body>
29     <!-- 
30         em 和 rem
31             em相對與父級大小的倍數,父級文字大小是多少,決定子級文字em的大小
32 
33             rem 針對html文字字體大小
34             通常響應式佈局都用rem,經過媒體查詢改變html的文字大小,就能夠改變總體全部的頁面中的文字大小
35      -->
36     <div>
37         棄我去者
38         <span>昨日之日不可留</span>
39         <a href="">亂我心者</a>
40     </div>
41 </body>
42 </html>

相關標籤/搜索

每日一句

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