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

17次阅读

没有评论

共计 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%);
        }