移动Web Day03

1.谷歌模拟器

点击图片框框位置可以切换移动设备视角。

2.分辨率与视口与二倍图使用方法

分辨率

注意：移动端是按照理逻辑分辨率来写的

视口

二倍图

以下是拿到设计稿，如果宽是750，就得设为二倍图，让宽变为375才可以。

3.适配方案简介

4.rem简介与基本使用

使用rem发现切换设备，盒子宽高都进行等比缩放。

如下图所示，设置了1个html为30px，再用rem设置盒子大小，盒子的宽高就是rem乘以1个html的像素。

5.媒体查询配合rem

6.rem配合flexible布局

引入该库发现改变移动设备都适配

那么如果每次都要自己计算太麻烦了，有没有更简单的办法。答案是当然有，下节再说

7.less-简介与注释

首先在less中可以写运算式子，还可以嵌套子类选择器，保存时会自动生成对应的css文件。

这里注意写完。less文件时再保存在css里时，单行注释不会保存在css里面

8.less-运算

这里注意下除法的两种写法，不然就用小括号，不然就用./计算但是./里面的点会爆红，不过是没有错误的，这是系统就会这样。

9.less-嵌套

10.less-变量

11.less-导入与导出

（1）导入

（2）导出

12.极速问诊-准备工作

引入文件

13.极速问诊-头部

html

<!-- 头部 --><header><a href="#" class="back"><span class="iconfont icon-left"></span></a><h3>极速问诊</h3><a href="#" class="note">问诊记录</a></header>

less

//定义变量
@rootSize: 37.5rem;// 头部
header {display: flex;justify-content: space-between;padding: 0 (15 / @rootSize);height: (44 / @rootSize);// background-color: skyblue;line-height: ( 44 / @rootSize);.icon-left {font-size: ( 22 / @rootSize);}h3 {font-size: (17 / @rootSize);}.note {font-size: (15 / @rootSize);color: #2CB5A5;}}

 

14.极速问诊-banner区域

html

    <!-- banner --><div class="banner"><img src="./assets/entry.png" alt=""><p><span>20s</span> 快速匹配专业医生</p></div>

less

// banner
.banner {margin-top: (30 / @rootSize);margin-bottom: (34 / @rootSize);text-align: center;img {margin-bottom: (18 / @rootSize);width: (240 / @rootSize);height: (206 / @rootSize);}p {font-size: (16 / @rootSize);span {color: #16C2A3;}}}

15.极速问诊-问诊类型

html

    <!-- 问诊类型 --><div class="type"><ul><li><a href="#"><div class="pic"><img src="./assets/type01.png" alt="#"></div><div class="txt"><h4>三甲图文问诊</h4><p>三甲主治及以上级别医生</p></div><span class="iconfont icon-right"></span></a></li><li><a href="#"><div class="pic"><img src="./assets/type02.png" alt="#"></div><div class="txt"><h4>普通图文问诊</h4><p>二甲主治及以上级别医生</p></div><span class="iconfont icon-right"></span></a></li></ul></div>

less

// 问诊类型
.type {padding: 0 (15 / @rootSize);li { margin-bottom: (15 / @rootSize);padding: 0 (15 / @rootSize);height: (78 / @rootSize);border: 1px solid #EDEDED;border-radius: (4 / @rootSize);a {display: flex;align-items: center;// 内容在78里面垂直居中height: (78 / @rootSize);img {margin-right: (14 / @rootSize);width: (40 / @rootSize);height: (40 / @rootSize);}.txt {flex: 1;h4 {font-size: (16 / @rootSize);color: #3C3E42;line-height: (24 / @rootSize);}p {font-size: (13 / @rootSize);color: #848484;}}.iconfont {font-size: (16 / @rootSize);}}}
}