美文网首页前端开发那些事儿
CSS3知识汇总13:媒体查询

CSS3知识汇总13:媒体查询

作者: 0清婉0 | 来源:发表于2021-02-15 16:43 被阅读0次

    1.逻辑关键字

    and 选择的两个或多个媒体特性必须同时满足条件

    not 对整个查询取反(除此之外,都将应用)只能放在开头使用

    only 在不支持媒体查询的旧浏览器中隐藏样式表,只能放在开头使用

    @import url(new.css) only all

    2.媒体类型

    all 所有能呈现内容的媒体

    print 打印给非盲用户看的文档,或者是文档的打印预览

    screen 呈现文档的屏幕载体,如电脑显示器和手持设备

    speech 语音合成器、屏幕阅读器和其他音频渲染设备

    3.媒体特性描述符

    width、min-width、max-width、device-width、max-device-width、min-device-width

    height、min-height、max-height、device-height、max-device-height、min-device-height

    aspect-ratio、min-aspect-ratio、max-aspect-ratio、min-device-aspect-ratio、max-device-aspect-ratio

    color、min-color、max-color、color-index、min-color-index、max-color-index

    monochrome、min-monochrome、max-monochrome

    resolution、min-resolution、max-resolution

    orientation

    scan

    grid

    【视口单位(可视区域)】

    vw  可视区域宽度,总宽度为100vw

    vh   可视区域高度,总高度为100vh

    vmin 比较可视区域宽度和高度,哪个更小就用哪个

    vmax 比较可视区域宽度和高度,哪个更大就用哪个

    以上单位,需要配合rem单位使用

    min-width   大于这个值或等于这个值

    max-width  小于这个值或等于这个值

    【屏幕的宽度】

    device-width、max-device-width、min-device-width

    即屏幕的横向尺寸

    如:max-device-width:1200px   在设备输出区域的宽度小于或等于1200像素时起作用

    【宽高比值】

    aspect-ratio、min-aspect-ratio、max-aspect-ratio

    如:min-aspect-ratio:2/1  在视区的宽高比至少为2:1时起作用

    device-aspect-ratio、min-device-aspect-ratio、max-device-aspect-ratio

    指媒体特性device-width和device-height的比值

    如:device-aspect-ratio:16/9  在输出设备显示区域的宽高比正好为16:9时起作用

    【彩色显示】

    color、min-color、max-color、color-index、min-color-index、max-color-index

    【单色】

    monochrome、min-monochrome、max-monochrome

    【分辨率】

    resolution、min-resolution、max-resolution

    【放置的方向】

    媒体特性height大于或等于媒体查询width时,返回此值

    orientation

    【扫描方式】

    scan

    【栅格】

    grid

    4.响应式设计

    @media(max-width:400px){

    /*小屏*/

    }

    @media(min-width:401px) and (max-width:1000px){

    /*中屏*/

    }

    @media(min-width:1001px){

    /*大屏*/

    }

    【meta】

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

    name="viewport":标记显示设备为视口

    width = device-width:宽度等于当前设备的宽度

    initial-scale:初始的缩放比例(默认设置为1.0)

    minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

    maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

    user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

    <meta http-equiv="X-UA-Compatible"content="IE=Edge,chrome=1">

    content="IE=Edge 让IE的文档模式永远都是最新

    chrome=1,这是由于Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果用户电脑安装这个chrome插件,就可让电脑内的IE浏览器规避版本因素,使用Webkit引擎及V8引擎进行排版及运算。当然如果用户没装这个插件,这段代码就会让IE浏览器以最高的文档模式展现效果。

    【PC端完美兼容各种分辨率的最佳方案】

    100vw = 1920px;

    1vw = 19.2px

    1px = 1 / 19.2vw;

    搭配vw和rem

    给根元素大小设置随着视口变化而变化的 vw 单位,这样就可以实现动态改变其大小。

    限制根元素字体大小的最大最小值,配合 body 加上最大宽度和最小宽度

    html{ font-size: 2vw; }

    相关文章

      网友评论

        本文标题:CSS3知识汇总13:媒体查询

        本文链接:https://www.haomeiwen.com/subject/mkmpxltx.html