移动Web开发之 rem适配布局----苏宁首页案例制作

目录

技术方案一

1. 技术选型

2. 搭建相关文件夹结构

 3. 设置视口标签以及引入初始化样式

4. 设置公共common.less文件

5. 新建index.less文件

6. body样式

7.细节

技术方案二

1. 技术选型

2. 搭建相关文件夹结构

 3. 设置视口标签以及引入初始化样式还有js文件

4. body样式

5.VSCode px 转换rem 插件 cssrem

---

技术方案一

1. 技术选型

• 方案：我们采取单独制作移动页面方案
• 技术：布局采取rem适配布局（less + rem + 媒体查询）
• 设计图： 本设计图采用 750px 设计尺寸

2. 搭建相关文件夹结构

 3. 设置视口标签以及引入初始化样式

    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">

4. 设置公共common.less文件

• 1. 新建common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的html字体大小，因为除了首页其他页面也需要（在CSS文件夹下面创建）
• 2. 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px
• 3. 划分的份数我们定为 15等份
• 4. 因为我们pc端也可以打开我们苏宁移动端首页，我们默认html字体大小为 50px，注意这句话写到最上面

// 设置常见的屏幕尺寸，修改里面的html文字大小
// 一定要写到最上面，代码从上往下依次执行，当我们在PC端打开的时候可以直接设置成50px
html {
    font-size: 50px;
}

// 我们此次定义划分的次数为15
@num: 15;

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

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

5. 新建index.less文件

• 1. 新建index.less 这里面写首页的样式
• 2. 将刚才设置好的 common.less 引入到index.less里面 语法如下：

// 在 index.less 中导入 common.less 文件
@import 'common';
// 是导入的意思，可以把一个样式文件导入到另一个样式文件里
// link 是把一个 样式文件 引入到html页面里面

• 3. 生成index.css 引入到 index.html 里面

    <link rel="stylesheet" href="css/index.css">

6. body样式

 有了宽度再写margin：0 auto；才会变化

body {
  min-width: 320px;
  width: 15rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #F2F2F2;
}

7.细节

 这里我用的是placeholder，当输入的时候里面的文字就会消失

 img不能直接给auto，记得要转换为块级元素

---

技术方案二

 

1. 技术选型

• 方案：我们采取单独制作移动页面方案
• 技术：布局采取rem适配布局2（flexible.js + rem）
• 设计图： 本设计图采用 750px 设计尺寸

2. 搭建相关文件夹结构

 

 3. 设置视口标签以及引入初始化样式还有js文件

    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入我们的flexible.js文件 -->
    <script src="js/flexible.js"></script>

4. body样式

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible给我们划分了10等份  750/10=75,  750/75=10 */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background: #F2F2F2;
}

5.VSCode px 转换rem 插件 cssrem

修改里面的基准值，屏幕多大，就用屏幕大小/你要划分几份=字体大小