【滑稽】每日一記——響應式佈局設計

時間 2019-11-30

標籤滑稽每日響應佈局設計简体版

原文原文鏈接

媒體查詢：css

@media[not|only] type [and][expr]{
rules
}
not|type 邏輯關鍵字
type 媒體類型（經常使用的媒體類型：all、screen）
expr 媒體表達式
rules CSS樣式html

and後面必定要加空格！and後面必定要加空格！and後面必定要加空格！佈局

媒體查詢的使用方式：
一、在現有樣式表中使用@media規則（經常使用）url

@media類型 and(條件1) and(條件2){CSS樣式}
例：@media all and(max-width：1024px)｛...｝spa

<style type="text/css">
            
            body{
                background-color: greenyellow;
            }
            @media all and (max-width: 980px) {
                body{
                    background-color: orangered;
                }
            }
            @media all and (max-width: 640px) {
                body{
                    background-color: blueviolet;
                }
            }
            
        </style>

二、在一個新樣式表中使用@import規則code

@import url(style.css) all and(max-width:1024px)
三、在link標籤給html文檔引用一個單獨的樣式表（經常使用）orm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"></style>
        <link rel="stylesheet" type="text/css" href="new_file.css"/>
    </head>
    <body>
    </body>
</html>

body{
    background-color: red;
}

@media only screen and (max-width:980px ) {
    body{
        background-color: blue;
    }
}
@media only screen and (max-width:640px ) {
    body{
        background-color: green;
    }
}

實現步驟：
在head中添加viewport及format-detection
CSS reset，可使用normalize.css
採用流體佈局加彈性佈局，佈局要語義化
使用媒體查詢設置主要斷點

設備寬高：device-width、device-height
渲染窗口寬高：width、height、min-width、min-height、max-width、max-height
設備方向：orientation
blog

相關標籤/搜索

每日一句

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