移动端rem适应布局

2019-11-26 16:01:28来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

移动端rem适应布局

移动端rem适应布局

  1. rem

    • rem(root em)是一个相对单位,类似于em,em是父元素字体大小。
    • 不同的是rem的基准是相对于html元素的字体大小。
    • 比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示24px
  2. 媒体查询

    • 使用@media查询,可以针对不同的媒体类型定义不同的样式
    • @media可以针对不同的屏幕尺寸设置不同的样式
    • 当你重置浏览器大小的过程,页面也会根据浏览器的宽度和高度重新渲染页面
    • 目前针对很多苹果手机,Android,平板等设备都用得到多媒体查询
    • 语法规范
    @media mediatype and|not|only(media feature)
    {
    CSS-Code
    }
    • 媒体类型
    解释说明
    all 用于所有设备
    print 用于打印机和打印预览
    scree 用于电脑屏幕,平板电脑,智能手机
    • 关键字

      • and:可以将多个媒体特性连接到一起,相当于“且”的意思
      • not:排除某个媒体类型,相当于“非”的意思,可以省略
      • only:指定某个特定媒体类型,可以省略
    • 媒体特性

      • 【注意】要用小括号进行包含

        解释说明
        width 定义输出设备中页面可见区域的宽度
        min-width 定义输出设备中页面最小可见区域宽度
        max-width 定义输出设备中页面最大可见区域宽度
  3. less介绍

    • Less是一门CSS扩展性语言,也称为CSS预处理。作为哦CSS的一种形式的扩展,他并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言特性。

    • 他在CSS的语法基础上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,

    • 网址:http://lesscss.cn

    • 常见预处理器:Sass,Less,Stylus

    • Less使用

      • 首先新建一个后缀名为less的文件,在这个less文件里面书写less语句

        • Less变量

          • 变量是指没有固定的值,可以改变的,

          • @变量名:值
          • 命名规范

            • 必须有@为前缀
            • 不能包含特殊字符
            • 不能以数字开头
            • 大小写敏感
        • Less编译

        • Less嵌套

        • Less运算

    • Less编译

      • vocode Less插件
      • Easy LESS插件用来把less文件编译为css文件
    • Less嵌套

      • 内层选择器的前面没有&符号,则他被解析为父选择器的后代
      • 如果有&符号,他就被解析为父元素自身或者父元素的伪类
    • Less运算

      • 乘号(*)和除号(/)的写法
      • 运算符中间左右有个空格隔开
      • 对于两个不同的单位的值之间的运算,运算结果的值取第一个值的单位
      • 如果两个值之间只有一个值有单位,则运算结果就取该单位

原文链接:https://www.cnblogs.com/SSPOFA/p/11935117.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:对于隐藏性质的非标准的动态 id 的下拉框,如何定位和选中

下一篇:rem布局