web移动端
1.重点：适配
2.目标：掌握4种适配方案 （ 流式布局、弹性布局、响应式布局、像素适配（rem适配） ）
一、流式布局：
1.概念：百分比布局的另外一种叫法（使用百分比的形式代替px的写法） 2.注意事项：
1.在网页布局中如果希望网页中能够实现自动适配，推荐使用流式布局。
2.流式布局在网页中，水平方向上绝对不能出现滚动条。
3.适配的根本：解决元素宽度的问题。
二、移动端基础概念：
1.屏幕大小：单位：寸（当前设备的屏幕对角线的长度）
2.屏幕分辨率：
主屏幕分辨率（与程序员无关）：衡量屏幕画质的高低。
物理分辨率：衡量当前设备的大小（高宽）。
3.像素密度ppi：单位面积所能容纳像素点的个数。
ppi越高，代表单位面积中容纳像素点的个数越多，每一个像素点的体积越小。
ppi越低，代表单位面积中容纳像素点的个数越低，每一个像素点的体积越大。
总结：ppi越高，画质越清晰。
4.设备独立像素dpr：当前设备中固有的一个比例值。
dpr在一定程度上可以解决页面显示的问题。
dpr不能修改。
5.2倍图：
将一个标准的图片放大2倍。
作用：解决让图片能够在设备中清晰显示。
三、视口viewport
1.什么是视口?
视口就是我们通过设备预览网页的一个窗口1. PC端视口指的就是浏览器可视区域的窗口大小2.移动端视口指的是移动设备屏幕区域的大小(不再是移动设备中浏览器窗口大小) [视口特指移动设备]
2.视口都有哪些?
视觉视口(visual viewport):在PC端,视觉视口就是浏览器的窗口,在移动端视觉视口就是屏幕
局视口(layout viewport):布局视口是和网页布局有关的.默认移动端的布局视口是980px
理想(标准)视口(ideal viewport): 保证页面中的盒子水平方向不能出现滚动条,页面中的内容不能出现缩放效果
语法：
<meta name="viewport" content="width=device-width,initial-scale= 1">
viewport:代表视口
width=device-width:设置布局盒子宽度与当前设备宽度大小一样(避免出现水平滚动条)
initial-scale: 1保证页面中的元素(盒子 和 文字) 不能出现缩放效果
网友评论