Css3響應式設計

時間 2019-12-17

標籤 css3 css 響應設計欄目 CSS 简体版

原文原文鏈接

什麼是響應式設計？css

　　首先，咱們要了解響應式設計是什麼？一句通俗易解得話就能夠歸納，所謂響應式設計就是可讓你設計的網頁不單單在PC端顯示，還能夠在智能機以及iPad平板等移動設備上顯示，應用了響應式設計的網頁能夠隨着分辨率的大小進行樣式變化，可是響應式設計不單單是關於屏幕分辨率自適應以及自動縮放的圖片等等，它更像是一種對於設計的全新思惟模式如今響應式設計已經應用的愈來愈廣，學前端的咱們不能不去掌握響應式設計，像美國白宮就對其官網主頁進行更新，改用了響應式網頁設計，這意味着不管用戶是經過何種電子設備訪問網站，其都能在上邊看到更加溫馨的頁面佈局和內容排版。html

響應式設計的優缺點？

　　其次，咱們要弄清響應式設計有哪些優缺點，以便咱們更好地進行學習與應用。前端

　　 優勢：css3

　　　　面對不一樣分辨率設備靈活性強可以快捷解決多設備顯示適應問題web

　　　缺點：chrome

　　　　兼容各類設備工做量大，效率低下代碼累贅，會出現隱藏無用的元素，加載時間加長其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況瀏覽器

設計思路

　　說到響應式佈局，就不得不提起CSS3中的Media Query（媒體查詢），易用、強大、快捷是製做響應式佈局的一個利器，使用這個工具，咱們能夠很是方便快捷的製造出各類豐富的實用性強的界面。接下來就一塊兒來深刻的瞭解Media Query框架

　　 經過不一樣的媒體類型和條件定義樣式表規則。ide

媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。
媒體查詢的大部分媒體特性都接受min和max用於表達「大於或等於」和「小與或等於」。如：width會有min-width和max-width
媒體查詢能夠被用在CSS中的@media和@import規則上，也能夠被用在HTML和XML中。

　　關鍵字

•and

　 •not not關鍵字是用來排除某種制定的媒體類型

　 •only only用來定某種特定的媒體類型

媒體特性

媒體特性	取值	接受min/max	描述
width	<length>	yes	定義輸出設備中的頁面可見區域寬度
height	<length>	yes	定義輸出設備中的頁面可見區域高度
device-width	<length>	yes	定義輸出設備的屏幕可見寬度
device-height	<length>	yes	定義輸出設備的屏幕可見高度
orientation	portrait \| landscape	no	定義'height'是否大於或等於'width'。值portrait表明是（豎屏），landscape表明否（橫屏）
aspect-ratio	<ratio>	yes	定義'width'與'height'的比率
device-aspect-ratio	<ratio>	yes	定義'device-width'與'device-height'的比率。如常見的顯示器比率：4/3, 16/9, 16/10
color	<integer>	yes	定義每一組輸出設備的彩色原件個數。若是不是彩色設備，則值等於0
color-index	<integer>	yes	定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0
monochrome	<integer>	yes	定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0
resolution	<resolution>	yes	定義設備的分辨率。如：96dpi, 300dpi, 118dpcm
scan	progressive \| interlace	no	定義電視類設備的掃描工序
grid	<integer>	no	用來查詢輸出設備是否使用柵格或點陣。只有1和0纔是有效值，1表明是，0表明否

　　 兼容性工具

綠色 = 支持
紅色 = 不支持

支持版本\類型	IE	Firefox	Safari	Chrome	Opera
版本	6-8	4	5.1.7	13	11.5
版本	9	4	5.1.7	13	11.5

示例一:在link中使用@media:

上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。

示例二:在樣式表中內嵌@media:

@media (min-device-width:1024px) and (max-width:989px)，screen and (max-device-width:480px)，(max-device-width:480px) and (orientation:landscape)，(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}

在示例二中，設置了電腦顯示器分辨率(寬度)大於或等於1024px(而且最大可見寬度爲989px);屏寬在480px及其如下手持設備;屏寬在480px以及橫向(即480尺寸平行於地面)放置的手持設備;屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。

咱們還能夠設置設備的手持方向，橫向仍是豎向orientation(portrait|lanscape)

案例

　　爲你們分享一份案例，以便你們快速理解（沒有使用device-width，orientation(portrait|lanscape)）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>/*媒體查詢@media (min-width:900px ) { }當瀏覽器顯示區域大於900px顯示@media (min-width:900px ) { }裏的樣式,*/
        @media (min-width:900px ) {
            #jb{
                height: 100px;
                background: linear-gradient(to left,red,yellow,green,deepskyblue,blue,purple);/*線性漸變*/
                font-size: 25px;
                font-weight: bold;
                color: white;
                line-height: 100px;
                padding: 0 15px;
            }
            #left{
                padding: 0 15px;
                width: 25%;
                float: left;
            }
            #right{
                padding: 0 15px;
                margin-top: 15px;
                margin-right: 15px;
                float: right;
                width: 25%;
                background: dodgerblue;
                color: white;
                text-align: center;
            }
            #right h3{
                background: darkcyan;
                height: 25px;
                line-height: 25px;
            }
            #right:active{
                background: yellow;
                color: red;
            }/*點擊後改變顏色*/
            #right:active h3{
                background: green;
                color: red;
            }
            #left p{
                background: dodgerblue;
                height: 25px;
                line-height: 25px;
                font-weight: bold;
                color: white;
                padding: 0 15px;
            }
            #left p:active{
                background: yellow;
                color: red;
            }
            #center{
                width: 42%;
                float: left;
            }
            #center img{
                width: 100%;
                box-shadow: 0 0 15px red;
                border-radius: 15px;
                -webkit-filter: blur(2px);/*瀏覽器兼容谷歌前綴webkit,火狐前綴moz,IE前綴ms,歐朋前綴o*/
                -moz-filter: blur(2px);/*filter過濾blur模糊*/
                -ms-filter: blur(2px);
            }/*圖片模糊*/
            #center img:hover{
                -webkit-filter: blur(0px);
                -moz-filter: blur(0px);
                -ms-filter: blur(0px);
                -webkit-transform: rotate(5deg);/*transform變形，rotate旋轉，deg旋轉的程度角度*/
                -moz-transform: rotate(5deg);
                -ms-transform: rotate(5deg);
            }/*當鼠標移入，圖片由模糊變爲清晰並旋轉5度。*/
            #center p:first-letter{
                padding-left: 1em;
            }
            article{
                -webkit-column-count: 2;/*column-count分欄，即將文章等分爲幾列*/
                -moz-column-count: 2;
                -ms-column-count: 2;
                -webkit-column-gap: 15px;/*column-gap分欄間的間隔*/
                -webkit-column-rule: 1px solid gray;/*column-rule分欄間隔中邊框的寬度,樣式和顏色。*/
                -moz-column-gap: 15px;
                -ms-column-rule: 1px solid gray;
                -ms-column-gap: 15px;
                -moz-column-rule: 1px solid gray;
                border:1px solid green;
                padding: 0 1vw;
            }
            article h2{
                -webkit-column-span:all;/*column-span:all跨欄，即將文章等跨欄顯示*/
                -moz-column-span:all;
                -ms-column-span:all;
                background: dodgerblue;
                height: 50px;
                line-height: 50px;
                text-align: center;
            }
            footer{
                background: dodgerblue;
                height: 50px;
                line-height: 50px;
                text-align: center;
                margin-top: 120%;
            }
            
        }/*媒體查詢@media (max-width:900px ) { }當瀏覽器顯示區域小於900px顯示@media (max-width:900px ) { }裏的樣式*/
        @media (max-width:900px ) {
            #jb{
                height: 100px;
                background: linear-gradient(to left,red,yellow,green,deepskyblue,blue,purple);
                font-size: 25px;
                font-weight: bold;
                color: white;
                line-height: 100px;
                padding: 0 15px;
            }
            #left{
                width: 100%;
            }
            #right{
                margin-top: 15px;
                float: right;
                width: 100%;
                background: dodgerblue;
                color: white;
                text-align: center;
            }
            #right:active{
                background: yellow;
                color: red;
            }
            #right:active h3{
                background: green;
                color: red;
            }
            #left p{
                background: dodgerblue;
                height: 25px;
                line-height: 25px;
                font-weight: bold;
                color: white;
                padding: 0 15px;
            }
            #left p:active{
                background: yellow;
                color: red;
            }
            #center{
                width: 100%;
                float: left;
            }
            #center img{
                width: 100%;
                box-shadow: 0 0 15px red;
                border-radius: 15px;
                -webkit-filter: blur(2px);
                -moz-filter: blur(2px);
                -ms-filter: blur(2px);
            }
            #center img:hover{
                -webkit-filter: blur(0px);
                -moz-filter: blur(0px);
                -ms-filter: blur(0px);
                -webkit-transform: rotate(5deg);
                -moz-transform: rotate(5deg);
                -ms-transform: rotate(5deg);
            }
            #center p:first-letter{
                padding-left: 1em;
            }
            article{
                -webkit-column-count: 1;
                -moz-column-count: 1;
                -ms-column-count: 1;
            }
            footer{
                background: dodgerblue;
                height: 50px;
                line-height: 50px;
                text-align: center;
                margin-top: 520%;
            }
            
        }
        </style>
    </head>
    <body>
        <header>
            <div id="jb">
                旅遊App
            </div>
            <aside id="left">
                <p>航班</p>
                <p>城市</p>
                <p>小島</p>
                <p>美食</p>
            </aside>
            <div id="center">
                <h2>城市</h2>
                <p>城市也叫城市聚落，是以非農業產業和非農業人員水電費和加快速度會返回的時間發貨的機房環境的是否合適的話就放寒假是對方結婚的的覆蓋和考試的仍是發生的公司附近時都會發生的回覆開機時間點附近。</p>
                <img src="img/1.jpg"/>
                <article>
                    <h2>跨欄標題</h2>
                    <section>
                        <p>爲了能在Web頁面中方便實現相似效果，按時發動機和房價確定會放假的航空飛機後開機速度發貨就收到回覆見識到紅飛機上的花費就收到回覆。</p>
                        <img src="img/2.jpg" />
                    </section>
                    <section>
                        <p>爲了能在Web頁面中方便實現相似效果，按時發動機和房價確定會放假的航空飛機後開機速度發貨就收到回覆見識到紅飛機上的花費就收到回覆。</p>
                        <img src="img/3.jpg" />
                    </section>
                    <section>
                        <p>爲了能在Web頁面中方便實現相似效果，按時發動機和房價確定會放假的航空飛機後開機速度發貨就收到回覆見識到紅飛機上的花費就收到回覆。</p>
                        <img src="img/4.jpg" />
                    </section>
                    <section>
                        <p>爲了能在Web頁面中方便實現相似效果，按時發動機和房價確定會放假的航空飛機後開機速度發貨就收到回覆見識到紅飛機上的花費就收到回覆。</p>
                        <img src="img/5.jpg" />
                    </section>
                </article>
            </div>
            <aside id="right">
                <h3>優惠信息</h3>
                <p>更多優惠信息更多優惠信息更多優惠信息</p>
                <h3>團購</h3>
                <p>更多優惠信息更多優惠信息更多優惠信息</p>
                <h3>外賣</h3>
                <p>更多優惠信息更多優惠信息更多優惠信息</p>
            </aside>
        </header>
        <footer>Dsfsd sdfsdf dfsd dsdfsd SEERds gdf</footer>
    </body>
</html>

相關標籤/搜索

每日一句

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