移动端特点
PC和手机
PC端网页和移动端网页的有什么不同?
- PC屏幕大，网页固定版心
- 手机屏幕小，网页宽度多数为100%
谷歌模拟器
使用谷歌模拟器可以在电脑里面调试移动端的网页
屏幕尺寸
了解屏幕尺寸概念
屏幕尺寸: 指的是屏幕对角线的长度，一般用英寸来度量
PC端主流设备的分辨率
- PC端常见分辨率
- 这个分辨率是屏幕硬件的分辨率, 出厂自带, 无法修改, 就是物理分辨率
- 1920 * 1080
- 1366 * 760
- 在操作系统中, 都会有一个推荐的缩放比例
- 应用这个缩放150%之后, 屏幕呈现的分辨率就变了
- (1920/150%) * (1080/150%)
- 这个实际使用的分辨率是操作系统(软件)控制的, 就是逻辑分辨率
- 逻辑分辨率的作用就是统一屏幕的显示效果, 让不同分辨率的屏幕呈现一致的UI体验
移动端主流设备的分辨率
制作网页参考物理分辨率还是逻辑分辨率?
- 制作网页都要参考逻辑分辨率
- 下面是京东网站, 在我电脑上展示的宽度是1690, 这个就是我的屏幕的逻辑分辨率: 2560 / 150% = 1707
- 存在误差是因为京东网页右侧滚动条占用了一点宽度
- 下面是移动端网站, 使用的也是逻辑分辨率
适口标签
默认情况下，PC网页的宽度和逻辑分辨率是相同的
<!DOCTYPE html>
<html lang="en">
/* 最简单的HTML */
/* 默认宽度就是屏幕的逻辑分辨率宽度 */
/* 2560 / 150% = 1707 */
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>hello</div>
</body>
</html> 
默认情况下，手机网页的宽度固定是980, 和逻辑分辨率无关
使用适口标签, 使移动端网页的宽度和设备宽度(逻辑分辨率)相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 适口: 显示HTML网页的区域 -->
<!-- 适口标签: 用来约束适口的标签 -->
<!-- 属性:
viewport: 视口
width=device-width: 视口宽度=设备宽度
initial-scale=1.0: 缩放1倍(不缩放)
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>hello</div>
</body>
</html>
二倍图
设计师的设计图一般都是750px的图(也就是苹果6/7/8的物理分辨率), 称为二倍图
- 如果设计图是375px, 更方便我们写代码, 因为代码要按照设备的逻辑分辨率设置元素尺寸
- 但是375px的图放在750px的屏幕上显示, 效果是不好的,会模糊失真
- 为了保证显示效果, 设计稿都是按照物理分辨率(750px)设计
- 在H5中二倍图最多, App中, 有可能会遇到多倍图
能够使用像素大厨软件测量二倍图中元素的尺寸
- 拿到移动端设计稿之后, 我们把设计稿拖到像素大厨, 然后在开发模式里, 把设计稿选项里的1x改成2x,
- 然后再测量尺寸, 这个尺寸就是写代码的尺寸
百分比布局
百分比布局也叫流式布局,
- 就是宽度自适应(百分比单位), 高度固定(像素单位)
- 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.toolbar {
position: fixed;
left: 0;
bottom: 0;
/* 百分比布局 流式布局 */
width: 100%;
height: 50px;
background-color: pink;
border-top: 1px solid #ccc;
}
.toolbar li img {
height: 100%;
}
.toolbar li {
float: left;
width: 20%;
height: 50px;
}
</style>
</head>
<body>
<div class="toolbar">
<ul>
<li>
<a href="#"><img src="./images/index.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/classify.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/jd.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/car.png" alt=""></a>
</li>
<li>
<a href="#"><img src="./images/login.png" alt=""></a>
</li>
</ul>
</div>
</body>
</html>
随着技术发展,行业要求也越高,现在也要求高度自适应.
