web 移动端开发基础
文章目录
- web 移动端开发基础
- 了解视口相关内容
- meta 视口标签
- 掌握二倍图用法
- 物理像素 & 物理像素比
- 多倍图
- 二倍精灵图做法
- 了解移动端常见选择方案
- 掌握移动端常见问题解决方案
- 移动端常见的布局方式
- 流式布局（百分比布局）
- flex 布局 - 弹性布局
- flex 布局概念
- flex 布局原理
- 容器属性（给父元素设置的属性）
- 项目的属性 （容器内子元素设置的）
- rem 布局
- Rem 单位概念
- 掌握 媒体查询制作方法
了解视口相关内容
视口 viewport - 浏览器显示页面内容的屏幕区域。视口可以分为 布局视口，视觉视口，理想视口
- layout viewport （布局视口）
- 一般移动设备的浏览器默认设置一个布局视口，用于解决早起 PC 页面在手机显示问题
- IOS，Android 基本都将这个视口的分辨率设置为 980px，所以 PC 上的页面大多数都在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面
- visual viewport （视觉视口）
- 用户正在看到 页面区域
- 可以通过缩放操作视觉视口，不影响布局视口，布局视口任保持原来的宽度
- ideal viewport （理想视口）
- 为了使网站在移动端有最理想的浏览和阅读宽度而设定
- 理想视口，对设备来讲，是最理想的视口尺寸
- 需要手动添加 <meta> 视口标签通知浏览器操作
- <meta> 视口标签的主要目的： 布局视口的宽度应该与理想视口的宽度一致 (设备宽度等于布局宽度)
meta 视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
| 属性 | 解释说明 |
|---|---|
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
掌握二倍图用法
物理像素 & 物理像素比
- 物理像素点指的是 屏幕显示的最小单位，真实存在的，例如： 苹果6\7\8 ：750*1334
- 开发时的 1px 不等于 1个物理像素
- PC 端页面， 1px 等价 一个 物理像素，但移动端不同
- 一个 px 的能现实的物理像素点的个数，称为 物理像素比或屏幕像素比
- Retia (视网膜屏幕) 是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，提高屏幕显示的细腻程度
Retia 屏 显示效果
多倍图
- 对于一张 50px * 50px 的图片，在手机 Retina 屏中打开，按照物理像素比会放大倍数，从而造成图片模糊
- 在标准的 viewport 设置中， 使用倍图来提高图片质量，解决在高清设备中的 模糊问题
- 通常使用二倍图 因为 iPhone 6\7\8 的影响。 但现在还存在3 倍图 4倍图的情况，这个按实际情况调整
- 背景图片需要注意缩放问题
/* 在 iPhone 8 下设置 */
img {
/* 原始图片 100px * 100px */width: 50px;height: 50px;
}
/*使用背景图时候*/
div{background-size: 50px 50px;
}
二倍精灵图做法
- 在 firework 里面把精灵图等比例缩放为 原来的 一般
- 之后根据新的大小 测量坐标
- background-size 精灵图原来宽度的一般
了解移动端常见选择方案
- 单独制作移动端页面（主流）
- 通常情况下，网址域名前面加 m（mobile）可以打开移动端页面
- 通过判断设备，如果是移动端设备打开，就跳转到移动端页面
- 需要完成 两套代码，维护成本较高
- 响应式页面兼容移动端（其次）
- PC 和 移动端共用一套网站，在不同宽度的屏幕下，样式自动适配
- 通过判断设备屏幕宽度来改变样式，以适应不同终端
- 制作时要考虑不同 设备宽度，因此需要花费比较多的精力
掌握移动端常见问题解决方案
浏览器：
- 移动端浏览器基本以 webkit 内核为主，因此需要考虑 webkit 兼容问题
- 放心使用H5 标签和 CSS3 样式
- 浏览器的私有前缀 只需要考虑添加 -webkit- 即可
css 初始化 normalize
移动端 css 初始化推荐使用 normalize.css
normalize 的优点： 保护了有价值的默认值，修复浏览器 bug ，模块化的， 拥有详细的文档。
normalize 官方网站
特殊样式的设置
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
*{-webkit-tap-highlight-color: transparent;
}
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
input{-webkit-appearance: none;
}
/*禁用长按页面时的弹出菜单*/
img,a {
-webkit-touch-callout: none;
}
移动端常见的布局方式
单独制作移动端页面(主流)
- 流式布局 （百分比布局）
- flex 弹性布局（推荐使用）
- less + rem + 媒体查询布局
- 混合布局
响应式页面兼容移动端(其次)
- 媒体查询
- bootstrap
流式布局（百分比布局）
- 流式布局，就是百分比布局，也称为 非固定像素布局
- 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行收缩，不受固定像素的限制，内容向两侧填充
- 流式布局方式是 移动 web 开发使用比较常见的布局方式
注意事项
- 制作过程中，需要定义页面的 最大和最小支持的宽度。
- max-width 最大宽度 （max-height 最大高度）
- min-width 最小宽度（min-height 最小高度）
flex 布局 - 弹性布局
flex 布局概念
- flex 是flexble box 的缩写，用来为盒状模型提高最大的灵活性，任何一个容器都可以指定为 flex 布局
- 当父盒子设定为 flex 容器后，子元素的 float，clear， vertical-align 属性将失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
- 容器默认存在两根轴：水平的 主轴（main axis）和垂直的 交叉轴（cross axis）
- 主轴的开始位置（与边框的交叉点）叫做 main start
- 结束位置叫做 main end；交叉轴的开始位置叫做cross start
- 结束位置叫做 cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
flex 布局原理
- 采用 flex 布局的元素，称为 Flex 容器 （flex container）,简称容器
- 容器内的子元素自动称为容器成员，称为 Flex 项目（flex item）,简称项目
- 设置父元素的 display 属性为 flex，来控制盒子的位置和排列方式
容器属性（给父元素设置的属性）
| 属性名 | 概念 |
|---|---|
| flex-direction | 决定主轴的方向（即项目的排列方向） |
| flex-wrap | 设置子元素是否换行，默认在一行内显示 |
| justify-content | 设置主轴上的子元素排列方式 |
| align-items | 设置交叉轴 子元素的排列方式（单行） |
| align-content | 设置交叉轴子元素的排列方式（多行） |
| flex-flow | 复合属性，同时设置 flex-direction 和 flex-wrap |
项目的属性 （容器内子元素设置的）
| 属性名 | 概念 |
|---|---|
| order | 定义项目的排列顺序。数值越小，排列越靠前，默认为0 |
| flex-grow | 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大 |
| flex-shrink | 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小 |
| flex-basis | 定义了在分配多余空间之前，项目占据的主轴空间（main size） |
| flex | flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 |
| align-self | 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 |
Flex 布局语法教程 - 详细内容
rem 布局
思考：
- 页面布局文字能否随着屏幕大小变化而变化？
- 流式布局和 flex 布局主要针对宽度布局，那高度如何设置自适应变化？
- 怎么样让屏幕尺寸改变时 页面的高度和宽度等比 缩放？
Rem 单位概念
- rem （root em）是一个相对单位，类似 em ，em 是父元素字体大小
- 不同的是 em 的参考 页面根元素（html）的字体大小
- 列如： html 设置 font-size:12px; 非根元素设置 width：2rem; 转换 px 表示就是 24px
- rem 的优势：父元素文字大小可能不一致，但整个页面只有 html 元素，可以很好的控制整个页面元素大小比例
html { font-size: 12px; }/* 此刻 div 字体大小就是 24px */
div { font-size: 2rem; }
掌握 媒体查询制作方法
媒体查询
媒体查询（Media Query） 是 css3 新增语法
- 使用 @media 查询，可以针对不同的媒体类型定义不同的样式
- @media 可以针对不同的屏幕尺寸设置不同的 样式
- 浏览器屏幕宽度发生变化时， 页面尺寸跟随 变化
- 目前针对很多 iOS、Android 、平板灯设备都用得到 媒体查询
语法规范
@media mediatype and | not | only (media feature) {/* ...css-code*/
}
mediatype 媒体类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板，手机等 |
关键字
关键字 将媒体类型或多个没写特性连接到一起作为媒体查询的条件
| 关键字 | 解释说明 |
|---|---|
| and | 可以将多个媒体特性连接到一起，相当于“且”的意思 |
| not | 排除某个媒体类型，相当于“非”的意思，可以省略 |
| or | 测试多个媒体查询的条件，只要有一个条件成立，则执行，“或”的意思 |
| only | 指定某个特定的媒体类型，可以省略 |
媒体特性
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备页面中可见区域的宽度 |
| min-width | 定义输出设备页面最小可见区域宽度 |
| max-width | 定义输出输出设备页面最大可见区域的宽度 |
@media screen and (min-width: 800px) {
/* 在屏幕设备中，判断屏幕尺寸大于等于800px的时候，最小宽度是 800px*/
}
@media screen and (max-width: 600px) {/* 屏幕最大宽度为600px 时 生效*/
}@media screen and (min-width: 540px) and (max-width: 969px) {
/*屏幕大于等于540px 并且 小于等于 969px 时*/
}
媒体查询引入资源
使用 link 标签判断设备尺寸, 引入不同的 css 文件
<link rel="stylesheet" href="css/style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="css/style640.css" media="screen and (min-width: 640px)">
媒体查询 + rem 实现元素动态大小变化
