響應式佈局及其實用類

時間 2019-12-02

標籤響應佈局及其實用简体版

原文原文鏈接

所謂響應式佈局，就是根據瀏覽尺寸的不一樣，作出相應的變化javascript

其原理是利用 CSS3 的 media queries 判斷瀏覽窗口的尺寸css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Media Queries</title>
 6     <link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap.css">
 7     <script type="text/javascript" src="../../resources/bootstrap-2/js/bootstrap.js"></script>
 8     <script type="text/javascript" src="../../resources/jQuery/jquery-1.12.4.min.js"></script>
 9 
10 
11     <script type="text/javascript" src="../../resources/js/html5.js"></script>
12     <!--解決手機上的顯示問題-->
13     <meta name="viewport" content="width=device-width, initial-scale=1.0">
14     <!--解決IE低版本問題-->
15     <!--[if lt IE9]>
16     <script type="text/javascript" src="../../resources/js/html5.js"></script>
17     <![endif]-->
18     <style>
19         body{
20             background: #000000;
21         }
22         /*當瀏覽器窗口寬度小於767像素的時候,從新設置樣式*/
23         @media (max-width: 767px) {
24             body{
25                 background: #f00000;
26             }
27         }
28     </style>
29 </head>
30 <body>
31 
32 </body>
33 </html>

響應式佈局簡單舉例

上面用到了 max-width，其在窗口小於指定值的時候觸發，還能夠使用 min-width，表示在大於指定值的時候觸發html

也能夠組合使用，(max-width:v1) and (min-width:v2)，表示在這個區間內的時候觸發樣式html5

如何把固定樣式的佈局改爲響應式佈局呢？java

只須要添加jquery

<link type="text/css" rel="stylesheet" href="../../resources/bootstrap-2/css/bootstrap-responsive.css">

BootStrap已經預先定義好了經常使用瀏覽窗口尺寸的處理方式bootstrap

實用類

:visible-phone　　在手機上顯示該元素，其餘地方隱藏瀏覽器

:visible-tablet　　在平板上顯示該元素，其餘地方隱藏ide

:visible-desktop　在電腦上顯示該元素，其餘地方隱藏佈局

:hidden-phone　　在手機上隱藏該元素，其餘地方顯示該元素

:hidden-tablet　　在平板上隱藏該元素，其餘地方顯示該元素

:hidden-desktop　在電腦上隱藏該元素，其餘地方顯示該元素

相關標籤/搜索

每日一句

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