media queries常用介紹及相容性問題解決

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

媒體查詢media queries，響應式布局的利器。
本文分兩塊內容：
一，常用介紹
二，如何解決IE不支援的問題

一、常用介紹
如果有能力看官網（強烈推薦）的話，下面的介紹（常用的部分）可以不用看了，地址：https://www.w3.org/TR/css3-mediaqueries
1，常用的兩種引入
a, 通過link media =“type and （attribute）”
b, css 中 @media type and （attribute）
註：type： screen print all … attribute: max-width, min-width,… 多個attribute 可以再次and (attribute)

2, 常用的 type 和 attribute
媒體查詢常用在多屏自適應，所以type 上用的多的screen，如果沒有特別限定的可以用all 意所有類型下都生效
attribute 常用的：max-width: 數值+單位表示最大長度以內生效，同理還有min-width 意最小長度範圍以內生效
兩者可以同時使用以實現兩個邊界以內的螢幕寬下生效代碼。

二、IE 相容性問題

ie 低版本，不支援。
項目需要相容ie7+ github 上找了個外掛程式 https://github.com/scottjehl/Respond 可以實現相容IE6+
談下遇到的問題：內部樣式，按照使用介紹，將對應的js檔案放在樣式後面，怎麼也出不來效果，後面改為外部樣式引入，就解決了問題。

附：常用介紹demo

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>    <link rel="stylesheet" media="screen" href="css/1.css"/>    <link rel="stylesheet" media="print" href="css/2.css"/>    <link rel="stylesheet" href="css/3.css"/>    <link rel="stylesheet" href="css/4.css"/>    <link rel="stylesheet" href="css/5.css"/>    <link rel="stylesheet" href="css/6.css"/>    <link rel="stylesheet" href="css/7.css"/>    <title>media Query</title>    <style>        p{text-align: center;}    </style></head><body>    <p>小雪日戲題</p>    <p>張登</p>    <p>甲子徒推小雪天，</p>    <p>刺梧猶綠槿花然；</p>    <p>融合長養無時歇，</p>    <p>卻是炎洲雨漏偏。</p><p style="margin-top:100px;font-size:12px;">if you want to know more,please come here: <a href="https://www.w3.org/TR/css3-mediaqueries/">https://www.w3.org/TR/css3-mediaqueries/</a></p></body></html>

1.css

p:nth-child(1){    color:#f00;    font-weight:600 ;}

2.css

p:nth-child(2){    color:#f0f;}

3.css

@media screen{    p:nth-child(3){        color:#727486;    }}

4.css

@import "3.css";p:nth-child(4){    color:#0f0;}

5.css

@media all and (min-width:500px){    p:nth-child(5){        color: #7093ff;    }}@media all and (max-width:1000px) and (min-width:500px){    p:nth-child(5){        color: #ff8696;    }}

6.css

@media not print{    p:nth-child(6){        color: #ffb778;    }}

7.css

@media all and (orientation: portrait){    p{        font-family: "黑體";        font-size:32px;    }}@media all and (orientation: landscape){    p{        font-family:"宋體";        font-size:16px;    }}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More