移动端-less+rem+媒体查询布局

13次阅读
没有评论

共计 1866 个字符,预计需要花费 5 分钟才能阅读完成。

less+rem+媒体查询布局

rem 单位

  • rem(root em)是一个相对单位,类似于em,em是父元素的字体大小
  • 不同的是rem的基准是相对于html元素的字体大小

比如,根元素(html)设置 font-size="12px"; 非根元素设置 width: 2rem; 则换算成px表示就是24px

媒体查询(Media Query)

  • 使用 @media 查询,可以针对不同的媒体类型定义不同的样式
  • 使用 @media 可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
  • 目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询
    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
  • @media 开头 注意@符号
  • mediatype 媒体查询类型,将不同的终端设备划分成不同类型,称为媒体类型
说明
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕、平板电脑、智能手机等
  • 关键字 and not only,关键字可以将媒体类型或多个媒体特性连接到一起作为媒体查询条件
说明
and 可以将多个媒体特性连接到一起,相当于“且”的意思
not 排除某个媒体类型,相当于“非”的意思,可以省略
only 指定某个特定的媒体类型,可以省略
  • media feature 媒体特性,必须有小括号包含,每种媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格,注意要加小括号
说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域的宽度
max-width 定义输出设备中页面最大可见区域的宽度

引入资源

当样式比较繁多的时候,我们可以针对不同的媒体使用不同的 stylesheets(样式表)

原理,就是直接在 link 中判断设备的尺寸,然后引用不同的 css 文件

    <link rel="stylesheet" media="mediatype and|ont|only (media feature)" href="style.css">

LESS使用

  • Less变量
        @变量名: 值;
        /* 必须有@为前缀 */
        /* 不能包含特色字符 */
        /* 不能以数字开头 */
        /* 大小写敏感 */
  • Less编译
  • Less嵌套
/* 经常用到的选择器嵌套 */
.bxo1 .box2 {
    width: 300px;
}

// Less嵌套写法
.bxo1 {
    .box2 {
        width: 300px;
    }
}

如果遇见(交集|伪类|伪元素选择器)

// 内层选择器的前面没有加 & 符号,则它被解析为父选择器的后代
// 如果有&符号,它就会被解析成父元素自身或父元素的伪类
.box1 {
    a {
        &:hover {
            color: red;
        }
    }
}
  • Less扩展
        // 将其他的less引用到当前less中,模块化
        @import url("common.less");

        // Less引用已有的值
        .bxo1 {
            .box2 {
                width: 300px;
                height: $width;
            }
        }

        // :extend() 对当前选择器扩展指定选择器的样式
        .p1 {
            width: 300px;
            height: 300px;
        }

        .p2:extend(.p1) {
            color: red;
        }

        // 直接对指定的样式进行引用,这里就相当于将.p1的样式在这里进行了复制
        .p3 {
            .p1();
        }

        // 使用类选择器时可以在选择器后面添加一个括号,它不会被解析到CSS中,可以直接引用它
        .p4() {
            width: 100px;
            height: 100px;
            backgoound-color: #fff;
        }
        .p5 {
            .p4();
        }

        // 混合函数 在混合函数中可以直接设置变量
        .test(@w, @h) {
            width: @w;
            height: @h;
        }

        // 混合函数 在混合函数中设置变量默认值
        .test(@w200px, @h300px) {
            width: @w;
            height: @h;
        }

        div {
            // 调用混合函数,按顺序传递参数
            .test(200px, 300px);
            // 调用混合函数,不按顺序传递参数
            .test(@h:300px, @w:200px);
            // 调用混合函数,使用默认值
            .test();
        }

        // 颜色加深函数darken
        body {
            background-color: darken(#bfa, 10%);
        }
  • Less 运算

元素大小取值方法

①最后的公式:页面元素的 rem 值 = 页面元素值(px)/(屏幕宽度 / 划分的份数)

②屏幕宽度/划分的份数就是 html font-size 的大小

③或者:页面元素的rem值 = 页面元素值(px)/ html font-size 字体大小

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计1866字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码