2021-05-11

最新推荐文章于 2024-04-07 08:48:59 发布

原创最新推荐文章于 2024-04-07 08:48:59 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

深入浅出篇 — 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%)
媒体查询 : 让网页在不同的终端上面展示效果相同(用户体验相同)
主要断点 : 设备宽度临界点

媒体查询：

媒体查询的引用方法：

用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;
}
//就会被覆盖样式，所以媒体查询最好写在最下面
复制代码

操作符的使用

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 是视口的宽度

小结：

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

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