前端移动web-day01学习笔记
原创
移动web入门
1.如何运行移动Web：
第一步：按住F12 打开开发者工具栏
第二步：点击左下角 PC/移动 切换图标
第三步：刷新页面
模拟手指缩放：shift+alt+鼠标拖拽（了解）
2.移动Web与PC端网页的区别：
2.1 尺寸不固定
iPhone5/SE：320
iphone6/7/8：375 （常用）
iPhone plus：414
2.2 需要设置 视口属性：手机网页的大小（name="viewport"）
content中的属性：
width=device-width：设置网页大小与当前设备大小一致
initial-scale=1.0：初始化缩放比例为1
user-scalable=no：不允许手指缩放(因为一旦缩放就会出现水平滚动条)
2.3 二倍图
先了解屏幕像素的解释
1.分辨率(物理像素)：屏幕发光点数量，由出厂时候决定
2.逻辑像素(css像素)：可以用代码来控制发光点的像素
3.像素密度(dpi)：分辨率/逻辑像素（物理像素/css像素）
可以通过在控制台输入window.devicePixelRatio来获取当前设备的DPI
DPI为1：1px,屏幕会有1个发光点
DPI为2：1px,屏幕会有2个发光点
4.图片尺寸 是指的 分辨率
PC端 ，DPI都是1，分辨率是多大，px就写多少
移动端，DPI一般为2，分辨率多大，px应该除以2
总结：移动端图片尺寸，一般要除以2
3.移动Web注意点：
3.1水平方向不能出现滚动条(垂直方向可以）
a.禁止用户缩放(user-scalabel=no)
b.宽度超过屏幕大小
3.2宽度使用百分比，高度使用px
流式布局：宽度使用百分比，高度使用px
3.3设置盒子模型为內减盒子 box-sizing:border-box;
box-sizing:border-box:width=真实宽度
不受到padding和border影响
box-sizing:content-box:width=content
受到padding和border影响
思维导图：
下午写了一个京东移动端案例
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。