移动端布局方案一:rem+媒体查询+less

前面已经了解到rem、媒体查询、less的基本使用,这里使用它们做一个小案例,也是移动端常用的适配方案之一.

准备工作:

新建一个index.html和css文件夹,在css文件夹中新建common.less、index.less.

下载normalize.css到css文件夹,官网:http://necolas.github.io/normalize.css/

文件目录如下:

思路:以设计稿的宽度除以15作为1rem,比如这里以750px为设计稿宽度,那么默认html的font-size设置为750 / 15 = 50px.当然,也可以设置为10份,20份,这里没有硬性要求.

common.less写一些通用样式,比如通过媒体查询设置在不同宽度下html的font-size:

html {
    font-size: 50px;
}

@num: 15;

@media screen and (min-width: 320px) {
    html {
        font-size: 320px / @num;
    }
}

@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @num;
    }
}

@media screen and (min-width: 375px) {
    html {
        font-size: 375px / @num;
    }
}

@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @num;
    }
}

@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @num;
    }
}

@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @num;
    }
}

@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @num;
    }
}

@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @num;
    }
}

@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @num;
    }
}

@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @num;
    }
}

@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @num;
    }
}

这里设置@num变量为份数,修改的时候方便一些.

index.html引入normalize.css、common.css和index.css.

    
    
    
    
    
    



    
rem+媒体查询+less布局
    

        
1
        
2
    

在index.less中写当前页面的样式:

@baseFont: 50;
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
}
header {
    width: 100%;
    height: 100rem / @baseFont;
    background-color: #ccc;
    text-align: center;
    font-size: 30rem / @baseFont;
    line-height: 100rem / @baseFont;
}
.content {
    width: 100%;
    height: 200rem / @baseFont;
}
.item {
    float: left;
    width: 150rem / @baseFont;
    height: 100%;
    background-color: pink;
    font-size: 25rem / @baseFont;
}
.item:nth-child(2) {
    float: right;
}

设置@baseFont变量为设计稿的宽度除以份数,这样计算元素样式rem值时都是通过设计稿上的标注px值除以baseFont得到,效果如下:

这样就实现了在不同屏幕大小下网页的自适应.