css3media響應式佈局【轉】

時間 2019-11-18

原文原文鏈接

響應式佈局能夠爲不一樣終端的用戶提供更加溫馨的界面和更好的用戶體驗，並且隨着目前大屏幕移動設備的普及，用"大勢所趨"來形容也不爲過。隨着愈來愈多的設計師採用這個技術，咱們不只看到不少的創新，還看到了一些成形的模式。隨着技術的發展css3的特性也被普遍應用開來,它的不少新標籤也很是好用並且很是容易學習,就像css3的響應式佈局也是很是6的,本來只能在pc端顯示的網頁如今能夠經過@media的加入就能夠把一個網頁變成響應式了,pc端也能夠移動端也能夠真是伸縮自如啊,例如呢css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小於200px*/
        @media only screen and (max-width:200px ) {
            #p{
                background: red;
            }
        }
/*    大於300px*/
        @media only screen and (min-width:300px ) {
            #p{
                background: yellow;
            }
        }
        
    </style>
    <body>
        <p id="p">小於200px背景變紅色大於300px背景爲黃色</p>
    </body>
</html>

　　這段代碼的效果：html

@media能夠用於單條件也能夠用於雙條件例如：css3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小於200px*/
        @media (min-width:200px ) and (max-width:500px ) {
            #p{
                background: red;
            }
        }
    </style>
    <body>
        <p id="p">200px以上而且500px如下背景變成紅色</p>
    </body>
</html>

這段代碼小於200px或者大於500px不顯示效果，簡單的一個@media就實現了響應式頁面,是否是很是easy。佈局

本身隨便作的一個頁面這是在450px以上的頁面效果：學習

這是450px如下的頁面效果整體作法就是將每一塊div響應式縮到450px如下的時候每一個div的寬度爲100%，高度爲auto，我在寫這個網頁的時候遇到一個小小的問題,作到頁面底部的時候底部導航飛了,它沒有安安分分的落在底部而是在中間,我在這裏分享一下小小的知識點那就是我最後的解決方法,只須要給底部的div一個style樣式 clear：both這樣底部就會安安分分的固定到下面了,在media裏還會有橫屏和豎屏的響應式,豎屏爲@media（orientation:portrait）豎屏爲@media(orientation:landscape)這樣就能夠適配橫屏和豎屏了，media的優點很是多例如咱們在建立本身的簡歷的時候能夠利用響應式佈局這樣咱們的機會豈不是大了不少,HR也有可能會在手機上看到你的簡歷這個時候機會可能就悄悄的來到你的身邊呢設計