移动web-第05天-移动适配

蟹小妞
111 阅读5分钟

一、移动适配

学习目标：

  • 当移动设备屏幕变大时，网页内容【图片、字体大小等】也随着变大，之前，普通的做法是不会跟着变大，【只是盒子被拉长了，字体并没有变大】

  • ①大手机大屏幕时，内容【盒子、字体大小、图片等比例放大】

  • ②小手机小屏幕时，内容等比例缩小

    • 例如： 苏宁官网

目前前端所学到的单位

  • 绝对单位 1em (text-indent: 2em;） % rem vw / vh
  • 相对单位 100px 360deg 60s 1000ms

一、相对单位 rem

因为移动设备的屏幕尺寸大小多种多样，我们需要制作出的网页尺寸【可以随着屏幕大小变化而变化】

  • ①不能把具体数值定死【常见是 长度px】
  • ②视口设置了：网页html的宽度=移动设备的宽度【跟着变化】，故引用相对单位 rem 来表示长度
  • ③为什么不采用百分比布局？因为：百分比布局特点宽度自适应，高度固定【一般指盒子的大小】

怎样将 rem 与 px 链接？

  • 1 em =参考当前容器的文字大小，当当前盒子没有设置时，找父级，再找跟标签，再没有找浏览器默认
  • 1 rem =参考【根标签html标签】的文字大小 【html动态标签】【专一】，但html标签没有设置文字大小时，font-size: ？px; 默认跟浏览器（一般是font-size: 16px;】，不会继承body 或其它元素的字体大小。【rem 目前多数企业在用的解决方案】
  • rem单位设置网页元素的尺寸：
    • ➢ 相对单位
    • ➢ rem单位是相对于HTML标签的字号计算结果
    • ➢ 1rem = 1HTML字号大小 Tips:有时html标签尺寸有小数点，是因为受windows系统分辨率影响，把缩放调为100%就行。 真机测试不会受电脑屏幕尺寸影响。

二、怎样将HTML字号与移动设备屏幕尺寸连接？

  • 第一种

image.png

image.png

image.png

    1. 问题1：当手机屏幕大小不同，分辨率不同， 如何设置不同的HTML标签字号？----利用【媒体查询】
    1. 问题2：设备宽度不同，HTML标签字号设置多少合适？ 一般情况下：
      • ➢ 设备宽度大， 元素尺寸大
      • ➢ 设备宽度小，元素尺寸小

image.png

三、rem适配原理

在不同宽度的设备中，让网页元素尺寸等比缩放效果

image.png

四、引入flexible.js文件

市场上有很多屏幕尺寸不等的宽度，用 【媒体查询】很麻烦，在实际开发中，一般不采用@媒体查询，采用flexible.js ----是手机淘宝团队封装的flexible.js框架【配合px to rem插件快速实现适配】 image.png

image.png

方法

  • ①插入【px to rem】插件
    • alt + Z 可以快速将px->rem rem->px
    • 当前的跟标签字号与UI设计稿尺寸一样，若不一样时，需要到设置里更改，一般设计稿是375px

五、Less语法

CSS预处理语言/糖衣语法/语法糖：

指【计算机语言中添加的某种语法】，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。给复杂的编程语言包裹一层糖衣(易于开发者开发)。

常见有3种： Sass、Less、Stylus

  • 浏览器只识别html、css语法，因此需要我们将写好的.less文件编译成.css文件后引入到html中
  • 每一次保存.less文件，对应的.css文件都会自动更新，故注意不要写错地方，在.css文件中书写，始终会被新的覆盖掉

image.png 使用Less语言时，需要引入插件

image.png

（1）less运算

Less语法：扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

注释： ①不想被编译在.css文件中， ctrl + / 显示效果 // ②会被编译在.css文件中，shift + alt + A 显示效果 /* */

运算【只包含 加 减 乘 除】 Less运算，使得css样式的算法更方便

  • 对比：①calc( )原生计算方式有兼容要求，less 没有兼容要求
  • ②单位【+ - 都需要带单位】【* / 只能第一个带单位】，在less中，没有此要求

image.png

CSS的计算

image.png

（2）less嵌套

  • 作用：避免选择器多时，造成混乱

  • 特点：只会生成后代选择器，你只要写在我的肚子里，你就是我的后代【后代特点，有空格】

    • 对于【伪元素、伪类选择器】却很不友好，故需要使用 & 来去掉编译后生成的空格影响

（3）Less变量设置属性值

  • 解决逐一修改某一属性值的繁琐步骤
  • 变量【变化的量】：存储数据，方便使用和修改。 先定义后使用 @变量名: 值; 会被编译成css所对应的属性值

变量名：自定义 值：css的属性值

image.png

（4）less导入【不需要在第1行上书写】

image.png

（5）less导出【需要在第1行上书写】

image.png // out: false 禁止导出

（6）less语法压缩文件【需要在第1行上书写】

空格、换行都会占用内存空间，压缩文件【减少css文件的体积】可以减少服务器压力

语法： image.png

（7）Less语法生成sourceMap文件 【需要在第1行上书写】文件.css.map

语法：方便在检查网页时，能找到对应书写的Less行号

image.png

（8）mixin混入

常使用场景：【单独作为1个类名】 【将多行代码进行封装，方便引用】

  • ①单行溢出
  • ②多行溢出
  • ③精灵图

image.png

avatar
文章
阅读
粉丝