移动端web

发表于 2023-10-11 更新于 2023-10-12 分类于技术阅读次数： Changyan：本文字数： 5.5k 阅读时长 ≈ 10 分钟

移动端web

CSS代码规范

类名语义化，全部小写，用下划线分割 “_”
类名嵌套层次尽量不超过三层
尽量避免直接使用元素选择器
避免使用 id选择器
避免使用 *选择器和 !important
属性书写顺序
- 布局定位属性：display / position / float / clear / visibility / overflow
- 尺寸属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align
- 其他属性：content / cursor / border-radius / box-shadow / text-shadow

meta视口标签

1	<meate name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"></meate>

mete标签content属性的属性	解释
width	viewport宽度，可设置为device-width
initial-scale	初始缩放比例，大于0的数字
minimum-scale	最小缩放比例，大于0的数字
maximum-scale	最大缩放比例，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

CSS初始化

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

特殊样式

移动端需要添加的特殊样式

/* 1. 清除 点击高亮效果  transparent为透明*/
-webkit-tap-highlight-color: transparent;

/* 2. 禁用 长按页面时弹出菜单*/
img,a {-webkit-touch-callout: none;}

/* 3. ios系统 需要该属性才能自定义样式*/
-webkit-appearance: none;

/* 4. 盒子模型 boder-size: border-box;*/
box-sizing: border-box;

背景缩放 background-size

二倍图

一般为了避免移动端图片自动放大2倍造成图片模糊，都是放2倍像素的图，再指定缩小50% ，同理也有三倍图、四倍图

1	background-size: 宽度高度;

单位：长度|百分比|cover|contain
- 百分比是以父级盒子为参考
- cover 扩展至背景图完全覆盖区域
- contain 扩展至背景图比例最大且不超过区域

背景颜色线性渐变 -webkit-linear-gradient

1	background: -webkit-linear-gradient(起始方向, 颜色1, 颜色2, ...);

开始方向：可以是方位名词、度数（默认top）

移动端技术选型

1.单独制作移动端页面（主流）	2.响应式页面兼容移动端
流式布局（百分比布局）	媒体查询
flex弹性布局（强烈推荐）	bootstarp
less+rem+媒体查询布局
混合布局

流式布局

通过盒子宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定像素影响

max-width: 200px 最大宽度
min-width: 100px 最小宽度

flex布局

特点：

传统布局 flex布局

兼容性好 PC端兼容差

布局繁琐布局极其简单

在移动端的局限性
原理：通过给父盒子添加felx属性，来控制子盒子的位置和排列方式
- 任何容器都可以指定为flex布局，display: flex;
- 设置为flex布局之后，不再有块级、行内元素之分
- 当父盒子设为flex布局后，子元素的float、clear、vertical-align 失效
- flex布局 = 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局

传统布局	flex布局
兼容性好	PC端兼容差
布局繁琐	布局极其简单
在移动端的局限性

常见父项属性：

flex-direction：设置主轴方向，另一个就是侧轴方向
- 默认主轴方向：水平向右 → ；默认侧轴方向：竖直向下 ↓
- 属性值说明
  
  row 从左到右 → （默认）
  
  row-reverse 从右到左 ←
  
  column 从上到下 ↓
  
  column-reverse 从下到上 ↑
flex-wrap：设置子元素是否换行
- 属性值说明
  
  nowrap 不换行（默认，如果装不开会缩小子元素宽度）
  
  wrap 换行
flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

属性值	说明
row	从左到右 → （默认）
row-reverse	从右到左 ←
column	从上到下 ↓
column-reverse	从下到上 ↑

属性值	说明
nowrap	不换行（默认，如果装不开会缩小子元素宽度）
wrap	换行

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

属性值	说明
flex-start	从头部开始（默认）
flex-end	从尾部开始
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间

align-items：设置侧轴上的子元素排列方式（单行时用)

属性值	说明
flex-start	从上到下 ↓
flex-end	从下到上 ↑
center	挤在一起居中（垂直居中）
stretch	拉伸（默认值）（要先去掉子元素height，否则不起作用）

align-content：设置侧轴上的子元素的排列方式（换行时用，单行时无效）
- 属性值比 justify-content 多了一个 stretch

常见子项属性
- flex：定义子项目分配剩余空间，用来表示占多少份数
  - 属性值：浮点数
- align-self：控制单个项目在侧轴上的排列方式
  - 可覆盖 align-items 属性
  - 属性值除了align-items的还有
    
    属性值说明
    
    auto 继承父盒子的 align-items 属性（默认）
    
    baseline 项目位于父盒子基线上
- order：定义项目的排列顺序
  - 数值越小越靠前，默认0
  - 属性值：数字

属性值	说明
auto	继承父盒子的 align-items 属性（默认）
baseline	项目位于父盒子基线上

less+rem+媒体查询布局

rem单位（root em）是一个相对单位，相对于html元素的 font-size 大小
媒体查询（Media Query）是CSS3新语法
- @media 可以针对不同的屏幕尺寸设置不同的样式
- 语法规范
  1
  2
  @media mediatype and|not|only (media-feature) {}
  /*例：@media screen and (min-width: 10px) and (max-width: 20px) {} */
  - mediatype 查询类型
    
    值解释说明
    
    all 用于所有设备
    
    print 用于打印机、打印预览
    
    screen 用于电脑、平板、手机
  - and|not|only 关键字
    
    关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
    - and：可以将多个媒体特性连接到一起，相当于“且”
    - not：排除某个媒体类型，相当于“非”，可省略
    - only：指定某个特定的媒体类型，可省略
  - media-feature 媒体特性\媒体功能
    - width：定义输出设备中页面课件区域宽度
    - min-width：定义输出设备最小可见区域宽度
    - max-width：定义射出设备最大可见区域宽度

值	解释说明
all	用于所有设备
print	用于打印机、打印预览
screen	用于电脑、平板、手机

引入资源

1	<link rel="stylesheet" href="" media="mediatype and\|not\|only (media-feature)">

Less

文件后缀 .less ，css预处理器，Less中文网址：http://lesscss.cn

Less 变量
1
@变量名: 值;
Less 编译

通过Easy LESS插件，保存后自动生成同名css后缀的文件，用link引入

Less 嵌套

div {
    color: #fff;
    a {
        color: #000;
    }
    &:hover { // 此时 & 符号代表div，即div:hover
        color: red;
    }
}

Less 运算

div {
    width: 100px + 5;
    height: (100px / 10px ); //除法需要括号或者 ./ 代替 / 
    border: 1em+0.5px+1rem solid black; //一次运算多个单位只取第一个
}

Less 导入

1 2	@import "路径"; // 与css导入法相同 @import url(路径)； // 两种方法均可

flexible.js+rem 布局

淘宝推出的移动端适配库

不需要写不同屏幕的媒体查询
原理是把当前设备划分为10等分
要引入js文件，去github下载

响应式开发

原理：需要一个父级作为布局容器，使用媒体查询针对不同宽度的设备进行布局

设备划分	尺寸区间	布局容器的width尺寸划分	bootstrap类前缀
超小屏幕（手机）	< 768px	100%	.col-xs-
小屏设备（平板）	>= 768px <992px	750px	.col-sm-
中等屏幕 (桌面显示器)	>= 992px < 1200 px	970px	.col-md-
宽屏设备（大桌面显示器）	>= 1200 px	1170px	.col-lg-

Bootstrap 使用

步骤

创建文件夹

创建html骨架结构

<head>
  <meta charset="utf-8">
  <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap 101 Template</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shiv 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
  <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
  <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
  <![endif]-->
</head>

引入相关样式文件

1	<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

书写内容

布局容器

bootstrap预定义了.container类（响应式）和 .container-fluid类（流式）

栅格系统
- 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，通过一系列的 .row 与 .col-xs- 等的组合来创建页面。
- row必须放到container布局容器里
- 需要给列添加类前缀，例如 .col-xs- 1 , 1 代表占用12份中的1份，xs代表设备大小在xs以及xs以上的都生效
- 每一行中列大于12 ，多余的列会换行
- 每一列默认15px的左右padding，而 .row 有 -15px的左右margin
  - 列嵌套时，最好加一个 .row 这样可以抵消父级的 padding
列偏移 col-md-offset-1
- 原理：给这一列添加 margin-left ，值为1份
列排序 col-md-pull-1 、col-md-push-1
- 原理：相对定位的 left 和 right
- 不能同时具有 pull和 push ，以前面的为准
- pull向左移动，push向右移动
隐藏 \ 显示
- .hidden-xs、.hidden-sm、.hidden-md、.hidden-lg 实现对应设备下隐藏
- .visible-xs、.visible-sm、.visible-md、.visible-lg 实现对应设备下隐藏
- 原理：display: none!important; 和 display: block!important;
字体图标
- 原理：before伪元素
- 使用方法：1.文档中的组件中找到字体图标的名称; 2.直接添加到class中
清除浮动
- 原理：双伪元素清除浮动
- 使用方法：直接在class中加 clearfix

项目实战

开发平台
- 摹客
- 蓝湖（收费）
swiper轮播图插件
- 学习网址