H5移动端
视口
视口就是浏览器显示页面内容的屏幕区域，视口分为布局视口 视觉视口 和理想视口
视觉视口：就是用户在手机上可以看网页的区域，我们可以通过缩放操作视觉视口，但是不会影响布局视口，布局视口仍然保持原来的宽度
理想视口：为了使网页在移动端有最理想的浏览和阅读宽度而设定，对设备来讲，最理想的视口就是视觉视口，我们需要给我们的移动端页面手动添加meta标签来通知浏览器操作，meta标签的主要目的就是告诉浏览器布局视口的宽度和理想视口的宽度一致，也就是设备有多宽，我们的布局视口就有多宽
（展示页在移动端状态下设置了meta标签和不设置meta标签的不同状态）
标准的viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0,maxmum-scale=1.0,minmum-scale=1.0,user-scalable=0">
width设置的是viewport宽度，我们的布局视口的宽度等于设备的宽度（视觉视口的宽度），即实现了理想视口的状态
initial-scale 初始缩放比，大于0的数字
maxmum-scale 允许的最大缩放比，大于0的数字
minmum-scale 允许的最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes （1）或no（0）
视口就是屏幕中用来显示网页的区域
可以通过查看视口大小来观察css像素和物理像素的比值
默认情况下 视口宽度 1920px（css像素） 1920px（物理像素）此时是1:1
不同的屏幕，单位像素的大小是不同的，像素越小屏幕就会清晰，智能手机的像素点远远小于计算机的像素点
二倍图
先查看上面对长度单位中的像素知识点
pc端和早前的手机频幕（普通屏幕） 1css像素=1物理像素
视网膜屏幕是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕的显示的细腻程度
我们需要一个50*50的css像素的图片，直接放到手机中里，手机会放大2倍，即100 * 100 （使用100*100的物理像素点显示我们图片）图片显示变模糊，处理这种问题的方法时，我们设计的时候就设计一个100 * 100的图片，然后程序员在写css代码的时候，将图片的尺寸缩小为50 * 50（css像素），这样我们的网页在移动设备上显示的时候，移动再将图片放大两倍显示，即100*100 ，这样就和我们设计图设计的是一样了，这样就不会出现图片模糊的情况了（文字是矢量的放大或者缩小都不糊，背景颜色也不会）
（也就是使用倍图来提高图片质量，来解决高清设备中图片模糊的问题）
总结:我们准备的图片比我们实际需要的大2倍，这就是2倍图（通常是2倍图，还有3倍图，4倍图等）
常见的设计稿的是相对iphone6/7/8的2倍图 即750px的，3倍图为1125px；放弃一些不常见的极端屏幕
img标签和背景图片在使用倍图的时候，注意缩放的问题
img{ 原始图片尺寸为100 * 100 width:50px; height:50px; } .box{ 原始图片尺寸为100 * 100 background-size:50px 50px; }
移动端制作方案 单独制作移动端页面 （常见） 或者响应式页面
rem
em是一个单位，是元素相对于元素自身字体大小的倍数
rem（root em）与em类似，是相对于html元素的字体大小的倍数
html{
font-size:14px;
}
div{
font-size: 16px;
}
div p{
// width：10em；
width:10rem;
height: 20rem;
width:10em;
height: 20em;
background: black;
}
-
使用rem单位的优点是：可以通过在html标签中设置字体大小来控制整个页面元素的大小
媒体查询
产生原因：页面元素根据屏幕大小自动缩放，以呈现等比例变化
流式布局和flex布局主要是针对宽度的布局，在高度上不能响应式变化
响应式布局：
-
网页可以根据不同的设备或者窗口大小呈现出不同的效果
-
使用响应式布局，可以使一个网页适用于所有的设备
-
响应式布局的关键是 媒体查询
作用：可以通过媒体查询给不同宽度的屏幕设置不同的样式，当我们重置浏览器大小的时候，页面也会根据浏览器的宽度和高度重新渲染页面
格式： media翻译 媒体 关键字 and or only ；and可以将多个媒体特性链接在一起，且（交集）；not 排除某个媒体类型，非（可以省略）；only 指定某个特定的媒体类型 可以省略； 逗号， 表示 或（并集）
@media 媒体类型 and|not|only (媒体功能){ 样式声明 }
@media，@不可省略
媒体类型：screen 屏幕 ；手机，电脑，平板屏幕
all 所有设备
print 打印设备
speech 屏幕阅读器等发生设备
可以使用逗号 , 连接多个媒体类型，这样他们之间就是或的关系
@media screen，print{ body{ font-size:16px; } }
可以在媒体类型之前添加一定义在输出设备中页面可见区域的宽度，屏幕宽度为500px
样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
一般比较常用的断点
小于768 超小屏幕 max-width=768px 手机
大于768 小屏幕 min-width=768px
大于992 中型屏幕 min-width=992px
大于1200 大屏幕 min-widt=1200px
注意：
媒体功能要使用括号包围
max-width和min-width都是包含等于
@media screen and (max-width:350px){ html{ font-size:24px; } } @media screen and (min-width:351px){ html{ font-size:24px; } } 在我们的屏幕上 并且 最大的屏幕宽度为350px 设置样式，即宽度<=350px的屏幕
推荐媒体查询我们按照从小到大的顺序来书写
移动端布局通过媒体查询和rem就可以实现不同的设备宽度，元素的尺寸也动态变化
使用媒体查询根据不同的设备比例设置html字体大小，然后页面元素使用rem单位，当html字体变化时元素的尺寸也会发生变化，从而达到等比例缩放的适配效果
按照设计稿与设备宽高的比例，动态的计算出html标签的font-size大小（媒体查询），css中，设计稿元素的宽高相对位置等取值，按照同等比例换算为rem单位的值
通过媒体查询,不同的屏幕尺寸引入不同的样式资源
<!-- 外链样式文件 --> <link rel="stylesheet" href="./style.css" media="screen and (max-width:350px)"> <link rel="stylesheet" href="./style.css" media="screen and (min-width:351px)">
vw
不同设备的完美视口大小是不同的，iphone6/7/8 是375 ipnone6/7/8 P是414
不同设备的像素比（物理像素与css像素的比值）是不同的，所以我们给一个元素设置width：375px；在不同设备上的显示效果是不同，在375的设备就是全屏，在414的设备就不是全屏
所以在移动端开发的时候就不能使用px作为单位来进行页面布局了
使用百分比布局的话，每个元素都是相对于父元素的百分比，所以百分比的相对物是不固定的，使用百分布局也不合适，我们得找一个在同一个设备中不会变化的来作为参照物
vw即viewport width 视口的宽度 在一个设备中视口的宽度是固定的，vw这个单位永远相对于视口的宽度来进行计算
100vw=1个视口的宽度 在视口为375px的设备上 100vw等375px。在视口为414的设备上 100vw等414px
1vw=1%的视口的宽度
设计图上一个48px * 35px的元素 在750px的设备上使用vw
100vw=750px（设计图的像素） 0.133333333vw=1px
6.4vw=48px；
4.667vw=35px； 即每一个元素的npx用vw表示极为 n*0.1333333
但是这样计算很麻烦，我们可以 使用vw和rem配合使用
即
html{font-size:0.133333333vw} 即font-size为1px
div{width:48rem} 即48vw即为48*0.133333vw 即48px
但是浏览器都设置的有最先显示的font-size值为12px，即如果我们设置的font-size小于12px（0除外），就会给我们的font-size重置为12px
我们写的48rem实际表现为48*12px为576px这是因为我的html的font-size为0.1333333vw为1px小于12px的，所以我么可以将html的font-size值扩大一些，随意扩大到40px即5.333333vw，即html{font-size:5.3333333vw};
我们的div{width:1.2rem} 即48/40
共有 0 条评论