• vw单位 vw适配 响应式布局


    vw单位

    1.移动端不能使用px来进行布局,固定的像素长度在不同手机中的表现是不一样的。

    2.vw表示的是视口的宽度。(100vw = 一个视口宽度、1vw = 1%视口宽度)

    3.和百分比不同,vw单位永远都是相对于视口宽度进行计算,百分比相对于父元素。

    vw适配

    1.网页中字体大小最小是12,除0外不能设置比12像素还小的字体,如果我们设置了一个小于12px的字体网页自动设置为12px。

    响应式布局

    1.响应式布局是网页可以根据不同的设备或窗口大小呈现出不同的效果,使用响应式布局,可以使一个网页使用于所有设备。

    2.响应布局的关键就是媒体查询,通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式。

    3.媒体查询:

      -语法:@media 查询规则 {}

      -媒体类型:

      -all 所有设备

      -print 打印设备

      -screen 带屏幕的设备

      -speech 屏幕阅读器

    4.可以使用逻辑运算符 “,”“and”"not"“only”。

    5.可以在媒体类型前面添加一个only,表示只有, only的使用主要是为了兼容一些老版本浏览器 (老版本无法识别会跳过)。

    6.媒体的特性:

      -width 视口宽度

      -height 视口高度

      -min-width 视口最小宽度(视口大于指定宽度时生效)

      -max-width 视口最大宽度 (视口小于指定宽度时生效)

    7.样式切换的分界点,我们称之为断点,也就是网页的样式会在这个点时发生变化。

      -一般常用的断点:

        -小于768 超小屏幕 max-width=768px

        -大于768 小屏幕 min-width=768px

        -大于992 中型屏幕 min-width=992px

        -小于1200 大屏幕 min-width=1200px

    学识浅薄,如有错误,恳请斧正,在下不胜感激。

  • 相关阅读:
    不用写Windows服务实现定时器功能(FluentScheduler )
    (转).NET开发人员必备的可视化调试工具(你值的拥有)
    《C#本质论》读书笔记(14)支持标准查询操作符的集合接口
    关闭 Visual Studio 2013 的 Browser Link 功能
    《C#本质论》读书笔记(12)委托和Lambda表达式
    (2)Underscore.js常用方法
    JS中级
    .NET开发工具之Excel导出公共类
    (1)Underscore.js入门
    datatable绑定comboBox显示数据[C#]
  • 原文地址:https://www.cnblogs.com/yin-jie/p/13898361.html
Copyright © 2020-2023  润新知