HTML+CSS移动端适配收尾总结

吃面包屑的鹿
163 阅读6分钟

这是我的第一篇掘金博客，开启掘金写作之路

学习移动端适配的总结

移动端适配

单位

  • 绝对单位

    • px(像素),deg(角度),s(秒),ms(毫秒)等等。。

  • 相对单位

    • em，rem，vw，vh

媒体查询(@media)

  • 作用：查询不同的媒体设备进而应用不同的css样式
  • 例：@media (媒体特性) { 选择器 { CSS属性 } }

例：当屏幕宽度等于300px时，根标签字体大小变成30px

@media  (width: 300px) {
          html {
                 font-size: 30px
          }
}

  • 注意点

    • 写媒体特性时，如果写定某个值，如上例，容易出现无效的结果，因为某些电脑显示屏默认尺寸是125%

image.png

  • 解决办法1：把屏幕显示尺寸改回100%即可
  • 解决办法2：在开发中，一般不会写定某个值，弊端太大，而是改用min-width,max-width这种范围媒体特性来写

rem适配（目前主流）

  • 作用：把px转换成rem单位，rem是根据根目录字体大小动态改变大小，进而实现元素适配

  • 注意点：em与rem的区别（开发移动项目的公司面试必问）

    • em代表的是当前标签的字体大小
    • rem代表的始终是根标签html的字体大小（谷歌浏览器根标签默认字体大小为16px）

  • flexible.js小框架（库）

    • 简介：手机淘宝团队封装的移动端小框架
    • 作用：直接手写媒体查询弊端太大，对于语法有严格要求，书写过于麻烦易错，此框架能直接动态的引入市面大部分的手机尺寸的媒体查询，引入此js文件能够配合插件实现快速适配

  1. 安装此插件，快捷键alt+z(px转rem) image.png

  2. 在rem布局方案中，html字号应设为视口宽度的1/10
    image.png

  3. 打开右上角设置，才能强行设置小数

image.png

  1. 更改这行数值即可

image.png

  • 核心原理

image.png

  • 如何得到rem值？

    • ？rem = 测量出的数值 / 当前ui设计师给你的设计稿对应的根标签字体大小
    • 如果ui给你一张750的设计稿，2倍图，所以设计稿真实尺寸是 375 那么根标签字体大小应该是 37.5
    • 如果ui给你一640的设计稿，2倍图，所以设计稿真实尺寸是 320 那么根标签字体大小应该是 32

vw,vh适配（未来趋势）

  • vw：viewwidth（视口宽度）

    • 1vw = 1/100视口宽度

  • vh：viewheight（视口高度）

    • 1vh = 1/100视口高度

  • 注意点

    • vw和vh和百分比单位非常类似，但是百分比单位必须参考父类，而父类的宽高也参考父类或者由内容撑开，而vw和vh只参考视口
    • 由于移动端手机的视口高度因为全面屏的影响，高度会改变，所以设置宽高的时候通常使用vw作为单位，而不会使用vh

  • px转vw插件，快捷键alt+x

image.png

  • 这里和rem不一样，写的是设计稿的宽度，会自动除以100的

image.png

less语法

  • 简介：语法糖（糖衣语法），便于开发者进行快速开发的语法规则。你按照语法糖去进行开发，可以让代码变得更加有逻辑，复用性更强，减少出错的概率。css预处理语言中的一种，有三种，由于三种语法很相似，学会一种即可

  • less语法与sass(scss)有95%的高度相似，不同点就是变量的设置。三种语言都有各自的中文网，可以去百度看看

    • less

      • less是基于JavaScript的在客户端处理 所以安装的时候用npm
      • less设置变量@开头 父类子类层层嵌套代码清晰，去除了代码冗余

    • sass（scss）

      • sass是基于ruby所以在服务器处理
      • sass设置变量$开头 父类子类层层嵌套代码清晰，去除了代码冗余

    • stylus

      • 空格代替冒号
      • 换行代替分号
      • 换行加缩进代替后代 优：简洁到极致。 缺：需要对css代码有极高的理解，不利于新手入门。

  • 由于浏览器不认识less文件，所以我们要对less文件做一个预处理操作，less编译成浏览器能够看懂的css文件。最后我们在html文件中引入的还是css文件

  • 下载less语法插件

image.png

  • 导出

    • 把less编译成css并给定路径

    • // out: ../css/

    • // out: false

      • 禁止导出

    • 注意当前代码只能写在第一行，以单行注释的方式出现

  • sourceMap

    • // sourceMap: true
    • 希望浏览器提示出less的行号

  • css压缩

    • // compress: true

    • 把输出的css文件进行压缩（去掉多余的换行空格和分号）

    • 减少css文件的体积

    • 为毛要压缩？

      • 因为上线项目要考虑高并发问题，必须要将文件压缩至最小化，避免短时间内多人访问服务器造成服务器崩溃，能够减轻服务器的压力

  • 连写

    • // compress: true, out: ../css/ , sourceMap: true

单行注释及多行注释

  • 单行注释不会被编译到css文件
  • 多行注释会被编译到css文件

变量声明及调用

image.png

  • @变量名:任何代码;
  • 定义变量一般来说会写在文档的顶部

导入其他less文件

  • @import "路径名";
    1. import 后面是空格 是空格 是空格 不是冒号
    1. 导入的只能是less文件，如果路径有误，则无法编译
    1. 后缀名.less可省略
    1. 当A.less文件导入了B.less文件，在B.less文件修改了，需要在A.less中再次保存，才能编译到css文件中。

简单计算

image.png

  • less文件里能进行简单计算，除法必须用括号包裹或改用./代替，否则会被当成分隔符

  • css文件也能进行运用calc()语法简单的计算

    • i9以下不支持

vscode插件

既然写到了px to rem 的小插件这里就推荐几个好用的插件

  • 标签配对高亮

    • Highlight Matching Tag

image.png - 需要在设置文件中写入下面代码，颜色自由更改，建议改点显眼的颜色

"highlight-matching-tag.styles": {
    "opening": {
      "name": {
        "highlight": "#ff0"
      }
    }
  }

  • 括号配对高亮

    • 2021年12月vscode更新的功能
    • 不用下载插件，在设置文件中写入下面两行代码即可，切记逗号分隔
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": true,

项目初始化步骤

  • 建立index.html，index.less文件

  • 引入理想视口

  • 导入iconfont.css，index.css文件

  • 导入base.less

  • 导出css,sourcemap以及压缩

  • 先导入jquery.js，再导入bootstrap.js

  • 用rem或vw，vh适配就不需要导入flexible.js了

bootstrap

  • 前端框架，导入框架后，复制代码调用类名即可

栅格系统

image.png

框架下载

image.png

avatar
文章
阅读
粉丝