css3響應式佈局

時間  2019-12-12
標籤 css3 css 響應 佈局 欄目 CSS 简体版
原文   原文鏈接

響應式佈局

  1. 分欄佈局，-webkit-column-width（定義每欄的寬度，會根據每欄寬度自動分紅若干欄） 
    • <style>
    .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋體";
color: #000; text-indent2em; -webkit-column-width: 250px;}
</style>
<body>
    <div class="wrap">
        <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
    </div>
</body>

       

  2. 分欄佈局，-webkit-columen-count(定義總共分爲幾欄，會自動根據欄數計算每欄寬度） 
    • <style>
    .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋體"; color: #000; text-indent2em; -webkit-column-count: 4;}
</style>
<body>
    <div class="wrap">
        <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
    </div>
</body>

       

  3. 分欄佈局，欄目距離column-gap（定義每欄之間的間隔） 
    • <style>
    .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋體";
color: #000; text-indent2em; -webkit-column-count: 4; -webkit-columen-gap: 30px;}
</style>
<body>
    <div class="wrap">
        <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
    </div>
</body>

       

  4. 欄目分隔線，columen-rule（定義每欄之間的線的樣式） 
    • <style>
    .wrap {width: 900px; border: 1px solid #000; font: 14px/28px "宋體"; color: #000; text-indent2em; -webkit-column-count: 4; -webkit-columen-gap: 30px; -webkit-columen-rule: 1px solid #000;}
</style>
<body>
    <div class="wrap">
        <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
    </div>
</body>

       

  5. 響應式佈局
    • 根據屏幕不一樣分辨率，採用不一樣的css文件，舉例以下：
      • html文件內容，link中根據media來決定加載哪一個css文件，最終根據屏幕分辨率會展示不一樣的樣式
      • <head>
    <link rel="stylesheet" type="text/css" href="indexa.css" media="screen and (min-width:800px)">
    <link rel="stylesheet" type="text/css" href="indexb.css" media="screen and (min-width:400px) and (max-width: 800px)">
    <link rel="stylesheet" type="text/css" href="indexc.css" media="screen and (max-width: 400px)">
</head>
<body>
    <div class="wrap">
        <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
         <p>據央視消息，「世界記憶」遺產名錄評選結果出爐，南京大屠殺檔案被列入「世界記憶」名錄。</p>
    </div>
</body>

         

      • indexa.css內容
      • @charset "utf-8";
/* CSS Document */
.wrap{border:1px solid #000; font:14px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;}

         

      • indexb.css內容
      • @charset "utf-8";
/* CSS Document */
.wrap{border:1px solid #000; font:16px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;}

         

      • indexc.css內容
      • @charset "utf-8";
/* CSS Document */
.wrap{border:1px solid #000; font:16px/28px "宋體";color:#000; text-indent:2em;}
  6. 響應式佈局（橫豎屏切換）
    • 根據屏幕的橫豎屏狀況來展示不一樣的樣式，橫屏展現indexb.css，豎屏展現indexa.css樣式 
      • <head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8">
<title>無標題文檔</title>
<link rel="stylesheet" media="all and (orientation:portrait)" href="indexb.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="indexa.css">
</head>
<body>
<div class="wrap">
    <p>按照淘寶首頁的無縫圖片切換作：第一張和最後一張複製，打開瀏覽器時ul的left是-520，而後走完最後一張，ul的left是-1040。這樣實現無縫切換，我就是卡在這裏了，它這麼樣實現到最後一個仍是順着到-1040，保證不是倒 ...</p>
    <p>按照淘寶首頁的無縫圖片切換作：第一張和最後一張複製，打開瀏覽器時ul的left是-520，而後走完最後一張，ul的left是-1040。這樣實現無縫切換，我就是卡在這裏了，它這麼樣實現到最後一個仍是順着到-1040，保證不是倒 ...</p>
    <p>按照淘寶首頁的無縫圖片切換作：第一張和最後一張複製，打開瀏覽器時ul的left是-520，而後走完最後一張，ul的left是-1040。這樣實現無縫切換，我就是卡在這裏了，它這麼樣實現到最後一個仍是順着到-1040，保證不是倒 ...</p>
    <p>按照淘寶首頁的無縫圖片切換作：第一張和最後一張複製，打開瀏覽器時ul的left是-520，而後走完最後一張，ul的left是-1040。這樣實現無縫切換，我就是卡在這裏了，它這麼樣實現到最後一個仍是順着到-1040，保證不是倒 ...</p>
    <p>按照淘寶首頁的無縫圖片切換作：第一張和最後一張複製，打開瀏覽器時ul的left是-520，而後走完最後一張，ul的left是-1040。這樣實現無縫切換，我就是卡在這裏了，它這麼樣實現到最後一個仍是順着到-1040，保證不是倒 ...</p>
    <p>按照淘寶首頁的無縫圖片切換作：第一張和最後一張複製，打開瀏覽器時ul的left是-520，而後走完最後一張，ul的left是-1040。這樣實現無縫切換，我就是卡在這裏了，它這麼樣實現到最後一個仍是順着到-1040，保證不是倒 ...</p>
    <p>按照淘寶首頁的無縫圖片切換作：第一張和最後一張複製，打開瀏覽器時ul的left是-520，而後走完最後一張，ul的left是-1040。這樣實現無縫切換，我就是卡在這裏了，它這麼樣實現到最後一個仍是順着到-1040，保證不是倒 ...</p>
</div>
</body>
  7. 響應式佈局中的另一種寫法 
    • <style>
@media screen and (min-width:800px) {        
    .wrap{border:1px solid #000; font:14px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:4; -webkit-column-gap:30px; -webkit-column-rule:1px solid #000;}
}

@import url("indexc.css") screen and (min-width:400px) and (max-width:800px);

@media screen and (max-width:400px) {        
    .wrap{border:1px solid #000; font:16px/28px "宋體";color:#000; text-indent:2em; -webkit-column-count:2; -webkit-column-gap:20px; -webkit-column-rule:1px solid #000;}
}

</style>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程