移动Web开发入门知识
1.移动Web与PC Web开发的关系
基本知识体系没有太大的区别:
HTML、CSS、JavaScript;
不同的终端设备具有不同的特性:
屏幕大小不同、网络环境和设备性能不同、交互方式不同、兼容性不同
2.移动Web端的基本概念
分辨率:纵向的屋里像素的个数 x 横向的屋里像素的个数
物理像素:又叫设备像素,出厂时就被设定死的,无法改变的 ,不同设备的物理像素点大小不同
css像素:又名逻辑像素,又叫设备独立像素,他是与设备无关的像素。css像素会自动换算成对应的物理像素
设备像素比(dpr): dpr = (在一个方向上)设备像素/css像素(没有缩放时)
标清屏:dpr=1,高清屏:dpr>1
缩放改变的是css像素的大小 ;
ppi(pixels per inch):每英尺的物理像素点,又叫dpi
3.Viewport
Viewport使用:
viewport是meta标签中的一个属性,
值的设置:
width=device-width,宽等于设备宽
height其实很少使用,因为height过高了,可以有滚动条,只需要注意width就行。
initial-scale = 1 初始缩放比例,一定程度上等同于width=device-width。原因是initial-scale有兼容性问题,所以最好两个一起写
user-scalable=no 禁止用户缩放
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--width=device-width 和 initial-scale=1.0用来设置视口初始大小,两个都写上以防兼容性问题
user-scalable=no用来设置视口是否可以被缩放, maximum-scale=1, minimun-scale=1 也有同样的效果" -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0,
user-scalable=no, maximum-scale=1, minimun-scale=1 ">
<title>Document</title>
</head>
<body>
</body>
<script>
//获取视口宽度
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.getBoundingClientRect().width)
//由于screen.width获取的是屏幕尺寸,或者获取屏幕的分辨率,我们不推荐使用。
</script>
</html>
真机查看(前提是在相同的网络环境下)
1.通过本地服务器打开开发页面;
2.在命令提示符中通过ipconfig查询IP地址,并替换页面地址中的相应部分
3.关闭电脑防火墙,在移动设备的浏览器中输入相应的地址(或者使用草料二维码生成器将网址生成一个二维码,手机扫码查看)
4.中常用的单位
1.px :绝对单位,当需要设置固定宽高是可用,也可用于设置字体大小
2.% :可以用来布局,相对单位,可以用来设置宽度,流体布局中会用到
3.em :相对单位(先根据自身设置的font-size属性值计算,如果自身没有设置font-size属性,就向前查找它的祖先元素设置的font-size属性值计算);设置字体大小时:1em = 父元素字体的大小;
设置替他,比如宽高时,1em = 自身字体的大小。一般用来控制首行的缩进,一般不用来布局
4.rem(root element)可以用来布局,相对单位(根据根元素的font-size值计算),1rem = 根元素(html)的字体大小
5.vw/vh/vmax/vmin :可以用来布局;视口单位,也是相对单位
1vw = 视口宽度的1%;1vh = 视口高度的1%;
vmin:当前vw和vh中较小的一个值;vmax:当前vw和vh中较大的一个值
5.常用的布局(各布局方式并不孤立,根据需要可以结合使用)
1.固定宽度布局(PC端常用)
了解即可;
2.流体布局(百分比布局%)
使用%单位,子元素相对父元素的单位。
3.Flex弹性布局(工具)
4.rem和vw布局
5.响应式布局
6.Grid网格布局(工具)