web开发移动端准备工作
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web开发移动端准备工作相关的知识，希望对你有一定的参考价值。
<!--
移动端准备工作：
1、<meta name="viewport"
content="width-device-width,initial-sacle=1.0,maximum-scale=1.0,user-scalable=no">
2、单位：px、pt、em、%
em相对大小（相对父元素font-size的值）
rem单位：默认情况下 1rem==16px；
原理：rem的值是根据元素html的font-size发生变化。
3、ppi dpi dpr
ppi：像素密度
dpi：苹果手机一般用ppi，android手机使用dpi
dpr：设备像素比=物理像素（设备显示）/逻辑像素（css设置的）
dpr的取值：移动端一般设计图大小：640px/750px/1080px
根据设计图的大小确定dpr的值：
如果设计图为640px>>>>dpr=2
如果设计图为750px>>>dpr=2
如果设计图为1080>>>>dpr=3
例子：
如果设计图为750px
从ps中量出宽88px
css咋么设置：
因为设计图为750px
所以dpr=2
88px/2==44px
-->
<!--
移动端布局方法：百分比布局（流式布局）、rem布局
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width-device-width,initial-sacle=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html{
font-size: 20px;
}
div{
background: orange;
/* width=200px,height=200px */
width: 10rem;
height: 10rem;
/* 1rem=20px 1rem=根元素的font-size大小*/
font-size: 20px;
}
</style>
</head>
<body>
<div>我爱你</div>
</body>
</html>
以上是关于web开发移动端准备工作的主要内容，如果未能解决你的问题，请参考以下文章