2021-05-11

深入浅出篇 — media媒体查询 - 响应式开发必备

响应性开发本质：

• 在只开发一套页面中，为了解决用户在不同设备上（大小或分辨率）看到的页面呈现效果是完美的

meta标签的作用：

• 将页面大小，根据分辨率不同进行相应的调节，以展示给用户的大小感觉上差不多
• 总而言之 ： meta是适配各种不同分辨率的设备

meta标签的介绍

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）  
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）    
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）   
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
复制代码

响应式网页开发方法：

• 流体网格 ： 可伸缩网格(大小宽度，都是可伸缩(可用flex或者百分比来控制小)float) --> 布局上面元素大小固定可伸缩
• 弹性图片 ： 图片宽高不固定(可设置min-width : 100%)
• 媒体查询 : 让网页在不同的终端上面展示效果相同(用户体验相同)
• 主要断点 : 设备宽度临界点

媒体查询：

1. 媒体查询的引用方法：

• 用link标签外

例：

    <link rel="stylesheet" href="./demo.css" media = 'screen and (max-width:375px)'> 
    1. href为宽度小于375px时，要启用的样式
    2. screen为媒体类型
    3. 记得要加括号
复制代码

• 写在内联样式里

例：

<style>
    @import 'index.css' screen and (max-width:375px);
    //等同于上面那个  
</style>
复制代码

• 直接写在外部css文件中

例：

@media (max-width: 375px){
    /* 样式 */
    html,body{
        width: 100%;
        height: 100%;
        background: blue;
    }
}

注意：媒体查询，不占权重，例：如果在其下面在写个同权重的样式会被覆盖
html,body{
    background: brown;
}
//就会被覆盖样式，所以媒体查询最好写在最下面
复制代码

1. 操作符的使用

• and 并且

例：

/* 小于375px 并且大于300px作用 */
@media screen and (max-width : 375px) and (min-width:300px){}
复制代码

• 逗号 或

例：

// 小于375px 或者大于300px 作用该样式
@media screen and (max-width : 375px) , (min-width:300px){}
复制代码

• not 除了

例：

/* 除了375px 以下，即375px以上可以作用 */
@media not screen and (max-width:375px)
复制代码

易混淆宽度：

• device-width/height 是设备的宽高 （如电脑浏览器的宽高 ， 不是浏览器的宽高）
• width/height 是视口的宽度

小结：

1. 响应式设计是最佳选择吗：

• 并不是，内容设计问题都可以通过响应式设计思路解决，项目的预算，目标用户以及产品定位决定了其实现方式。 2.响应式设计中的名词
• 渐进增强 ---> iphone6 向上兼容 兼容最新设备
• 优雅降级 ---> 开发通用版本 在兼容老版本 向下兼容
• 先移动端 ---> 后pc
• 在移动端中，先以iphone6为初始开发原型，在兼容其他版本