media响应式布局

响应式布局

media 语法

1. 外部引用 only screen and (max-width:640px) 仅当设备的宽度小于640ox时 使用这个样式

2. @引用 @media screen and (min-width:640px) { }

<style>
        @media screen and (min-width:640px){
            body{
                background-color: green;
            }
        }
    </style>

设置当前宽度为设备宽度 initial-scale = 1 按原比例缩放

3. 样式表中设置

@media screen and (min-width:600px) and (max-width:960px){ }
@media screen and (min-width:960px){ }
@media screen and (max-width:600px){ }

原文地址：https://www.qianqianhaiou.cn/index.php/archives/94/