《CSS3-布局》移动设备网页等比缩放布局

       移动设备网页，怎么才能做一套样式，可以适应不同分辨率设备？

       知识点：《CSS3-rem》相对于根元素字体大小的单位

                     《CSS3-media》在Html内容不变的情况，根据媒体设备不同，浏览器窗口尺寸不同，使用不同的CSS样式

                     《CSS3-flex》弹性布局

       

方案一：

1.为每个不同尺寸设备定义一套的css样式

2.使用media ,动态加载不同的css外联样式

 

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="stylea.css">

<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" ;href="styleb.css">

方案二：

1.为每个不同尺寸设备定义一套的css样式

2.使用@media ,动态加载不同的css内部样式

@media screen and (max-device-width:960px){
    body{background:red;}
}

@media screen and (min-width:960px){ 
    body{background:orange;}
}

方案三：

1.利用rem等比例缩放特点，使用rem单位

2.为不同尺寸设备指定html的font-size大小，其他元素大小根据html的font-size进行缩放

    /* for 1080+ px width screen */
    @media only screen and (min-device-width: 1080px), only screen and (min-width: 1080px) {html, body {font-size: 170px}}

    /* for 1080 px width screen */
    @media only screen and (max-device-width: 1080px), only screen and (max-width: 1080px) {html, body {font-size: 144px}}

    /* for 800 px width screen */
    @media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {html, body {font-size: 107px}}

    /* for 720 px width screen */
    @media only screen and (max-device-width: 720px), only screen and (max-width: 720px) {html, body {font-size: 96px}}

    /* for 640 px width screen */
    @media only screen and (max-device-width: 640px), only screen and (max-width: 640px) {html, body {font-size: 85px}}

    /* for 540 px width screen */
    @media only screen and (max-device-width: 540px), only screen and (max-width: 540px) {html, body {font-size: 72px}}

    /* for 480 px width screen */
    @media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {html, body {font-size: 64px}}

    /* for 414 px width screen */
    @media only screen and (max-width: 414px), only screen and (max-device-width: 414px) {html, body {font-size: 55.2px}}

    /* for 375 px width screen */
    @media only screen and (max-width: 375px), only screen and (max-device-width: 375px) {html, body {font-size: 50px}}

    /* for 320 px width screen */
    @media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {html, body {font-size: 42.7px}}

方案三项目实践：