手机端网页前端开发

1.视口

简介:浏览器显示页面内容的屏幕区域。

语法:meta

标准写法:

一般骨架会自动生成 

 2.像素

物理像素和开发像素是不一样的,物理像素是手机出厂就设置好了的,比如苹果8是750*1334
而开发像素是px,有的1px等于1物理像素,也有的1px等于2物理像素,都不一样

3.背景图片缩放background-size

语法:background-size: 背景图片宽度 背景图片高度;

单位: px|百分比|cover|contain;
cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域
contain: 把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

4.移动端常见布局

(1)流式布局(百分比布局)

简介:通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

一般要设置一个最大宽度和最小宽度

max-width 最大宽度(max-height 最大高度)
min-width 最小宽度(min-height 最小高度)

(2)flex弹性布局

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

注意:当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

1.flex 布局父项常见属性

①flex-direction设置主轴的方向(即项目的排列方向)

注意:主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

②justify-content设置主轴上的子元素排列方式

注意: 使用这个属性之前一定要确定好主轴是哪一个

③flex-wrap 设置子元素是否换行

注意:如果不换行,一行内装不下盒子时,会自动把每个盒子变小

④align-items 设置侧轴上的子元素排列方式(单行)

⑤align-content 设置侧轴上的子元素的排列方式(多行)

注意: 设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

⑥flex-flow复合属性

是flex-direction和flex-wrap属性的复合属性

语法:flex-flow: row wrap; 

2.flex 布局子项常见属性

①flex属性

简介:定义子项目分配剩余空间,用flex来表示占多少份数

语法: flex: number(默认为0);

②align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

语法: align-self: 属性值

注意:属性值和align-items一样

③order 属性定义项目的排列顺序

注意:和z-index不一样,这个是数值越小,排列越靠前,默认为0

语法:order: number(默认为0)

(3)less+rem+媒体查询布局

rem:是一个相对单位,类似于em,em是父元素字体大小,而rem是相对于html元素的字体大小

现在新的也可以用vw/vh了,更方便了,推荐用这个

vw:是一个相对单位,相对视口的尺寸计算结果,是把视口分为了100份,1vw=1/100视口宽度
vh同上,不过一般不用vh,因为本来就是等比例缩放,而且vh视口高度尺寸大,混用可能会盒子变形

vw和1%区别是vw永远是以视口宽度为准,而百分比以父盒子为准

vmin/vmax和vw是一样的,只不过vmin可以照顾平板横屏和竖屏的显示效果,直接把所以vw替换vmin就行了

vmin/vmax:与当下屏幕的宽度和高度的最大值或最小值有关,取决于哪个更大和更小

媒体查询(Media Query)

用处:可以针对不同的屏幕尺寸设置不同的样式

语法:

 注意:

1.用@media开头 注意@符号
2.mediatype 媒体类型

3.关键字and not only(关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件)

4.media feature 媒体特性 必须有小括号包含

引入资源:不同宽度时可以引入不同css样式

 Less

简介:是一门CSS拓展语言,也是CSS预处理器,在CSS语法基础上,引入了变量,Mixin(混入),运算以及函数等功能,简化了CSS编写和维护成本,后面要加.less

为什么用Less,而不用css,因为维护css的弊端有:

①Less变量

指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

语法:@变量名: 值;

变量命名规范:

1.必须有@为前缀
2.不能包含特殊字符
3.不能以数字开头
4.大小写敏感

②Less编译

不编译就只会是less文件,html不能用,要先编译生成css文件才能用

使用Easy LESS插件(直接vscode里面下)就能自动把less文件编译为css文件

③Less嵌套

一般选择器的嵌套

而我们Less的嵌套
 相当于就是括号里面再括号,无限嵌套,而如果碰到伪类等选择器,因为不能有空格,所以加&就代表没空格

④Less运算

任何数字、颜色或者变量都可以参与运算。

rem实际适配方案

1. 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小;（媒体查询)
2.CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值;(常见尺寸宽度是750px)

有两个方案

第一个就是less+媒体查询+rem
第二个就是flexible.js+rem

flexible.js+rem

流程:

1.先下载好flexible.js(github地址:https://github.com/amfe/lib-flexible),并用script引入这个文件
2.设置视口标签并link引入初始化样式
3.设置body样式

4.安装cssrem插件(vscode直接下),可以帮我们自动把px转换为rem

 轮播图

流程分析:

1.先下载Swiper插件(网上官网下),然后把文件里的swiper.min.css和swiper.min.js放进项目,并引入
2.官网找到类似案例,复制html结构,css样式,js语法
3.根据需求自己定制修改模块