移动web开发与适配

常用布局方式

1.定高，宽度百分比
2.flex布局
3.媒体查询

媒体查询结合百分比布局

@media 媒体类型 and (媒体特性){
    /*css样式*/
}

媒体类型：screen、print
媒体特性：max-width 、max-height
demo:

<style>
    @media screen and (max-width:320px){
        /*css样式*/
        .inner{
            width:60px;
            height:100px;
            background-color:blue;
        }
    }
    @media screen and (min-width:321px){
        /*css样式*/
        .inner{
            width:100px;
            height:100px;
            background-color:pink;
        }
    }
    /*当屏幕宽度大于等于321时样式才生效*/
</style>

    @media screen and (max-width:320px){
        /*css样式*/
        ul li{
            width:50%;
            height:100px;
            background-color:blue;
        }
    }
    @media screen and (min-width:321px){
        /*css样式*/
        ul li{
            width:25%;
            height:100px;
            background-color:pink;
        }
    }

也可以这样写入：(一般不用)

<link rel="stylesheet" type="text/css" href="" media="screen and (max-width:320px)">

rem布局

rem简介：
rem即fontsize of the root element
1rem=根元素字体大小（chrome下默认16px）

• 字体单位——值根据html根元素大小而定，可以作为宽度，高度等单位
• 适配原理——把px替换成rem，动态修改html的font-size的值进行适配
• 兼容性——Ios6以上和android2.1以上，基本覆盖所有流行的手机系统

应用：
使用css和媒体查询来根据屏幕大小设置不同的根元素 font-size

@media screen and (max-width:360px)and (min-width:321px){
//加and（min-width:321px）避免前面的样式被后面的覆盖掉
    html{
        font-size:20px;
    }
}
@media screen and (max-width:320px){
    html{
        font-size:24px;
    }
}