「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

前言

这篇文章主要是讲一些关于移动端的一些东西
比如说移动端的布局什么的,
上篇文章中的flex布局就非常适合移动端布局
然后移动端也有相对应的移动端的初始文件
布局方式也有很多
本篇将根据我学习移动端的笔记和心得来写

内容

视口

理想视口

移动端中使用
需手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的: 布局视口的宽度应该与理想视口的宽度一致, 简单理解就是设备有多宽我们布局的视口就多宽
```
<meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0">
```

视口属性.png

图片

1. 物理像素&物理像素比

PC端和早前的手机屏幕/普通手机屏幕: 1CSS像素 = 1物理像素的
Retina(视网膜屏幕) 是一种显示技术, 可以将更多的物理像素压缩至一块屏幕里从而达到更高的分辨率, 并提高屏幕显示的细腻程度

2. 多倍图

对于一张50px*50px的图片, 在手机Retina屏中打开, 按照刚才的物理像素比会放大倍数, 这样会放大倍数, 这样会找成图片模糊
在标准的viewport设置中, 使用倍图来提高图片质量, 解决在高清设备中的模糊问题
通常使用二倍图, 因为iPhone6/7/8的影响, 但是现在还存在3倍图4倍图的情况, 这个看实际公司开发需求
背景图片注意缩放问题
```
/*在iphone8下面*/
img  {
    /*原始图片100*100px */
    width: 50px;
    height: 50px;
}
.box {
    /*原始图片100*100px */
    background-size: 50px 50px;
}
```
移动端开发的选择

- 移动端主流方案
1. 单独制作移动端页面(主流)
  
  流式布局(百分比布局)
  - 将盒子宽度设置为百分比(max-w)
  flex弹性布局(强烈推荐)
  
  less+rem+媒体查询布局
  - 京东商城手机版
  - 淘宝触屏版
  - 苏宁易购手机版
2. 响应式页面兼容移动端(其次, 相当麻烦需要不断的调整)
```
 > 媒体查询
 > 
 > bootstrap
 - 三星手机官网
```

移动端初始化

移动端CSS初始化推荐使用normalize.css

CSS3盒子模型box-sizing

传统模式计算: 盒子的宽度 = css中设置的width + border + padding
css3盒子模型: 盒子的宽度 = css中设置的宽度width里边包含了border和padding
也就是说, 我们的css3中的盒子模型, padding和border不会撑大盒子了
传统盒模型: box-sizing: content-box;

css3盒子模型: box-sizing: border-box;

二倍精灵图做法

在firework里面把精灵等比例缩放为原来的一半
之后根据大小测量坐标
注意代码里面background-size也要写: 精灵图原来的一半

flex布局原理

采用Flex布局的元素, 称为Flex容器,简称"容器",它所有的子元素自动成为Flex项目, 简称"项目"

总结flex布局原理:

> 就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式

em & rem

em相对于父元素的字体大小来说的
rem 相对于 html元素字体大小来说的
rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

什么是媒体查询

媒体查询（Media Query）是CSS3新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式 @media可以针对不同的屏幕尺寸设置不同的样式~~ 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询~~

语法规范

@emedia mediatype and|not|only (media feature){
  css-Code;
}

用 @media开头注意@符号 mediatype 媒体类型关键字and not only media feature 媒体特性必须有小括号包含

<style>
/* 这句话的意思就是： 在我们屏幕上 并且 最大的宽度是
800像j
设置我们想要的样式 */
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 8BOpx) {
  body {
    background-color：■pink;
  }
}
    @media screen and (max-width: 500px) {
      body{
        background-color: purple;
      }
    }
<style>

引入资源（理解）当样式比较繁多的时候，我们可以针对不同的媒体使用不同stylesheets（样式表）。原理，就是直接,在link中判断设备的尺寸，然后引用不同的css文件。

Less基础

维护 css 的弊端 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。 CSS 需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的。不方便维护及扩展，不利于复用。 CSS 没有很好的计算能力非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less 介绍 Less（Leaner Style Sheets 的缩写）是一门CSS 扩展语言，也成为CSS预处理器。做为 CSS 的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS 的编写，并且降低了CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。 Less中文网址：lesscss.cn/ 常见的CSS预处理器：Sass、Less、Stylus
变量是指没有固定的值可以改变的。因为CSS中的一些颜色和数值等经常使用。

@变量名:值；

变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感

Less编译本质上，Less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的CSS文件。所以，我们需要把我们的less文件，编译生成为css文件，这样我们的html页面才能使用。
vocod Less插件
- Easy LESS 插件用来把less文件编译为css文件安装完毕插件，重新加载下vscode。只要保存一下Less文件，会自动生成CSS文件。
Less 嵌套如果遇见（交集|伪类|伪元素选择器））内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
Less 运算注意：
- 乘号（*）和除号（/）的写法
- 运算符中间左右有个空格隔开1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
1. 我们运算符的左右两侧必须项敲一个空格
2. 两个数参与运算如果只有一个数有单位，则最后的结果就以这个单位为准
3. 两个数参与运算，如果2个数都有单位，而且不一样的单位最后的结果以第一个单位为准
4. 除法必须加括号4.1

rem实际开发适配方案

① 按照设计稿与设备宽度的比例，动态计算并设置html 根标签的 font-size 大小；（媒体查询） ② CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；

设置公共common.less文件

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

简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库我们再也不需要在写不同屏幕的媒体查询，因为里面js做了处理它的原理是把当前设备划分为10等份，但是不同设备下，比例还是一致的。我们要做的，就是确定好我们当前设备的html文字大小就可以了比如当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/10)就可以里面页面元素rem值：页面元素的px值/ 75 剩余的，让flexible.js来去算

后记

此篇只讲了单独制作页面的一些内容并没有讲响应式
主要内容是由我的学习笔记而来, 因为我也没有参加过实际开发
总之移动端也是比较复杂的, 这篇文章也只是让小白了解一下

小白学前端05--移动端

前言

内容

视口

图片