前端移动端布局自适应及移动端和PC端共用一套代码注意事项

本文介绍: 移动端布局需要适应不同大小手机平板屏幕，所以字体图片等尺寸就要做到随着屏幕大小的变化去自适应，这样会给用户很好的体验感和美感。例如：以上就是今天要讲的内容，本文仅仅简单介绍了移动端布局注意事项。

前端移动端布局自适应

移动端布局需要适应不同大小手机平板屏幕，所以字体图片等尺寸就要做到随着屏幕大小的变化去自适应，这样会给用户很好的体验感和美感。

一、自适应 布局 概念？

为不同的屏幕分辨率定义不同的布局，即创建多个静态布局，每一个静态布局对应一个屏幕分辨率范围。屏幕分辨率发生变化时，页面中元素的位置会变化而大小不会变。

二、使用 步骤

1. head 标签里要写适用移动端

代码如下（示例）：

&lt;!-- viewport 视口操作
            width=device-width  宽度是设备的宽度
            initial-scale=1.0   允许缩放的比例是1.0
            user-scalable = no  不允许用户缩放页面
    --&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no"&gt;

3. CSS如何写？

PC和移动共用一套代码

代码如下（示例）：

<!-- 引入bootstrap文件 -->
*{
    margin: 0;
    padding: 0;
    font-size: 0px;
    box-sizing: border-box;          /*把标准盒模型转为ie盒模型，这样使用padding,margin之后宽度也最大是百分之百*/
}
body {
    background: #F7F7F7;
    width: 100%;
}


/* 使用媒介查询*/
@media (min-width: 1200px) {
            .container, 
            .container-lg, 
            .container-md, 
            .container-sm,
            .container-xl {
                max-width: 1200px;
        }
}

h5页面

/* 主体 */

.container { max-width: 640px; margin: 0 auto; background: #ececec; position: relative;}

书写移动端，设计稿给出px单位怎么灵活写成移动端自适应单位re m

方案一：@media 修改动态 re m
通过媒体查询符@media，来修改不同设备大小下的re m。

@media screen and (min–wi d th: 320px) {html{font–size:50px;}}
@media screen and (min–wi dt h: 360px) {html{font–size:56.25px;}}
@m edi a sc re en and (min–wi dt h: 375px) {html{font–size:58.59375px;}}
@m edi a sc re en and (min–wi dth: 400px) {html{font–size:62.5px;}}
@m edi a s c r een and (min-width: 414px) {html{font–s ize:64.6875px;}}
@medi a s c r een and (min-width: 440px) {html{font–s ize:68.75px;}}
@medi a scr een and (min-width: 480px) {html{font-size:75px;}}
@media scr een and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:106.25px;}}
@media screen and (min-width: 720px) {html{font-size:112.5px;}}
@media screen and (min-width: 760px) {html{font-size:118.75px;}}
@media screen and (min-width: 800px) {html{font-size:125px;}}
@media screen and (min-width: 960px) {html{font-size:150px;}}
这种方式在设置font-size数值的时候，会以一个值为基准，例如100px，然后根据宽度的比值，去算出不同宽度的font-size，就有了上面这么多的情况。这样的好处就是不同屏幕大小的手机屏幕上看到的界面比例都是一样的。