一、案例框架搭建
1、html 标签结构
在 html 中设置 meta 视口标签 , 设置宽度等于设备宽度 , 初始比例为 1.0 , 用户不可缩放 , 最大缩放比例和最小缩放比例都设置为 1.0 ;
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
此外 , 引入 normalize.css 初始化样式 ,
<link rel="stylesheet" href="css/normalize.css">
完整代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<title>Flex 弹性布局案例</title>
</head>
<body>
</body>
</html>
2、css 初始样式
在之前的开发中 , 积累的一些默认 css 样式 , 先设置到 css 样式文件的头部 ;
清除点击高亮样式 , 将点击后的高亮样式设置为transparent 完成透明 ;
* {
-webkit-tap-highlight-color: transparent;
}
在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 ;
input {
-webkit-appearance: none;
}
禁用长按页面时的弹出菜单 ;
img,
a {
-webkit-touch-callout: none;
}
清除浮动样式 :
.clearfix:after {
content: "";
display: block;
line-height: 0;
visibility: hidden;
height: 0;
clear: both;
}
设置 css3 盒子模型样式 :
div {
/* css3 盒子模型 */
box-sizing: border-box;
}
设置文本与图片对齐的样式 : 默认是与文字基线对齐 ;
img {
/* 图片与文字对齐样式 默认是与文字基线对齐 */
vertical-align: middle;
}
设置链接的样式 :
img,
a {
-webkit-touch-callout: none;
}
a {
color: #000;
/* 取消链接的下划线样式 */
text-decoration: none;
}
设置 ul 列表样式 :
ul {
/* 设置列表的默认样式 */
margin: 0;
padding: 0;
/* 去掉小圆点 */
list-style: none;
}
完整代码 :
body {
/* 网页布局宽度 = 设备宽度 */
width: 100%;
/* 最小宽度 320 像素 */
min-width: 320px;
/* 最大宽度 640 像素 */
max-width: 640px;
/* 居中对齐 */
margin: 0 auto;
/* 字体大小 14 像素 */
font-size: 14px;
/* 如果是苹果就是用苹果默认字体
如果不是苹果手机 就使用后啊面的字体 */
font-family: -apple-system, Helvetica, sans-serif;
/* 字体颜色 */
color: #000;
/* 行高 */
line-height: 1.5;
/* 水平方向超出隐藏 */
overflow-x: hidden;
}
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
* {
-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input {
-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,
a {
-webkit-touch-callout: none;
}
a {
color: #000;
/* 取消链接的下划线样式 */
text-decoration: none;
}
ul {
/* 设置列表的默认样式 */
margin: 0;
padding: 0;
/* 去掉小圆点 */
list-style: none;
}
img {
/* 图片与文字对齐样式 默认是与文字基线对齐 */
vertical-align: middle;
}
div {
/* css3 盒子模型 */
box-sizing: border-box;
}
.clearfix:after {
/* 清除浮动样式 */
content: "";
display: block;
line-height: 0;
visibility: hidden;
height: 0;
clear: both;
}
/* 上面是 CSS 的默认样式, 每个 CSS 文件都有上述样式, 下面开始就是正式样式 */