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

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

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

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

&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;

px 固定单位
 em 相对单位相对于父元素的字体大小 1em = 父元素的字体
 rem 相对单位相对于根标签的字体大小 1rem = 16px（默认）

注：

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

<!-- 引入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;
        }
}

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

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

屏幕布局适应

一、自适应 布局 概念？

二、使用 步骤

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

2. 自适应 单位 问题

3. CSS如何写？

总结

发表回复取消回复

一、自适应布局概念？

二、使用步骤

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

2. 自适应单位问题

3. CSS如何写？

相关文章

发表回复 取消回复

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

发表回复取消回复