移动web第五天

一、移动适配

       rem ： 目前多数企业在用的解决方案
       vw / vh：未来的解决方案

1.1 rem

使用rem单位设置网页元素的尺寸
◆网页效果：屏幕宽度不同，网页元素尺寸不同（等比缩放）
◆px单位或百分比布局可以实现吗？
1、px单位是绝对单位
2、百分比布局特点宽度自适应，高度固定

无rem缺点.png

3、有自适应时

有rem.png

      a、相对单位
      b、 rem单位是相对于HTML标签的字号计算结果
      c、1rem = 1HTML字号大小 = 屏幕视口的 1/10 ；

  手机屏幕大小不同分辨率不同， 如何设置不同的HTML标签字号？
  答：媒体查询

（1）媒体查询：能够检测视口的宽度，然后编写差异化的 CSS 样式；当某个条件成立, 执行对应的CSS样式
（2）写法：

媒体查询.png

Ⅰ、一般来说：
1、设备宽度大，元素尺寸大
2、设备宽度小，元素尺寸小
Ⅱ、参考案例：

媒体查询案列.png

（3）rem单位尺寸：
算法：rem单位的尺寸 = px单位数值 / 基准根字号

尺寸大小.png

  1、flexible.js是手淘开发出的一个用来适配移动端的js框架。
  2、核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

只需引入该.js文件即可

扩展.png

 1、 Less是一个CSS预处理器, Less文件后缀是.less
2、扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
3、注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

▲单行注释
语法：//注释内容
快捷键：Ctrl+/
▲块注释
语法：/* 注释内容 */
快捷键： shift + alt + A

注释.png

▲运算
1、加、减、乘直接书写计算表达式
2、除法需要添加（）或 ./

算法.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。