【滑稽】每日一记——响应式布局设计

时间 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