一、视口
视口就是浏览器显示页面内容的屏幕区域。视口可以分布为布局视口、视觉视口和理想视口
1、布局视口layout viewport
(1)一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题
(2)IOS、Android都把视口分辨率设置为980px,所以pc端上的页面大多都能在手机上呈现,只不过元素看起来很小,一般只能手动缩放页面
2、视觉视口 visual viewport
用户正在看到的网站的区域,可以通过缩放操作视觉视口,但是不会影响布局视口,布局视口仍然保持原来的宽度
3、理想视口 ideal viewport
(1)为了使网站在移动端有最理想的浏览和阅读宽度而设定
(2)理想视口,对设备来讲,是最理想的视口尺寸
(3)需要手写meta视口标签来通知浏览器操作
(4)meta视口标签的目的:布局视口的宽度和理想视口的宽度保持一致,就是设备有多宽,布局的视口就有多宽
meta 视口标签
<meta name="viewport"content="width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0">
width viewport宽度,可以设置device-width特殊值
initial-scale 初始缩放比,大于0的数字
maximum-scale 最大缩放比,大于0的数字
minimum-scale 最小缩放比,大于0的数字
user-scalable 用户是否可以缩放,yes或no
视口宽度和设备一致、默认缩放比1:0,不允许用户自行缩放、最大允许缩放比1.0,最小允许缩放比1.0
二、二倍图
1、物理像素&物理像素比
物理像素点指屏幕显示的最小颗粒,1px在PC端等于1物理像素,但是移动端不一定,一个1px能显示多少物理像素点成为屏幕像素比
视网膜屏幕是一种显示技术,把更多物理像素点压缩至一块屏幕内,从而达到更多分辨率
2、多倍图
图片在手机中打开,会按照物理像素比放大,出现模糊现象,因此用倍图的方式(放二倍大小的图片再缩小到需要的大小)
3、背景缩放
1、background-size
2、规定背景图像尺寸,两个参数为高度,宽度,只写一个参数就是指宽度,等比例缩放
3、单位可以是百分比,是相对父盒子的百分比
4、cover:等比例缩放,要求完全覆盖盒子 ,可能有部分背景图片显示不全
5、contain: 等比例缩放,尽量铺满不会超出,可能会有空白
三、移动端开发选择
1、单独制作移动端页面(主流)
2、响应式页面兼容移动端
3、CSS3盒子模型box-sizing
boxing-size:border-box;(传统是content-box)
传统盒子模型
boeder-sizing:center-box
css3盒子模型
box-sizing: border-box;
padding和border不会再撑大盒子举个例子:
传统盒子模型:
div:nth-child(1){
/* 传统盒子模型=width + border + padding */
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 10px solid red;
}
css3盒子模型
}
div:nth-child(2){
box-sizing: border-box;
// 有了这句话,就让盒子变成css3的盒子模型
//padding 和 border 不会再撑大盒子
width: 200px;
height: 200px;
background-color: purple;
padding: 10px;
border: 10px solid blue;
}
结果展示:
移动端可以完全兼容CSS3
以下有几个特殊样式,可以写到公共样式的css文件中
a{
-webkit-tap-highlight-color:transparent ;
/* 去除高亮效果 */
}
input{
-webkit-appearance: none;
}
a{
-webkit-touch-callout: none;
}
/* 禁用长按页面弹出菜单 */
五、移动端常见布局
主要包括流式布局、flex布局、rem布局
1、流式布局
百分比布局,非固定像素布局
(1)通过盒子的宽度设置成百分比来根据屏幕伸缩
(2)需要设定最大值最小值,防止影响内容显示max-width: min-width
2、flex布局
(1)传统布局兼容性好,但是布局繁琐,局限性高
(2)伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
(3)flex布局在PC端支持较差,移动端应用广泛
(4)采用flex布局的元素称为flex容器,所有子元素自动成为容器成员,成为flex项目,简称项目
布局原理
(1)任何一个容器都可以使用flex布局
(2)父盒子设为flex布局后,子元素的float、clear、和vertical-align属性失效
(3)原理:通过给父盒子添加flex属性,控制子盒子的位置和排列方式
在前面的文章又有单独介绍flex布局的文章,有需要的小伙伴可以去看其面对文章。
3、rem布局
rem单位
root em相对单位,em是父元素字体大小
rem是相对于html元素的字体大小
优点:可以通过修改html里面的文字大小来改变页面中元素的大小,可以整体控制
利用rem布局的话需要引入一个js插件
4、媒体查询
媒体查询是CSS3新语法
可以针对不同屏幕尺寸设置不同样式
@media mediatype and|not|only (media feature){
}
@media screen and (min-width:500px){
body{
background-color:red
}
}
mediatype:媒体类型
all:用于所有设备
print:用于打印机和打印预览
screen:用于电脑屏幕
媒体特性
width:定义
max-width:800 只有宽度小于800时,才执行下面样式
(1)screen还有and必须带上
(2)必须带单位px
(3)媒体查询+rem可以实现不同设备里尺寸动态变化,给html设定font-size,然后设置字体行高(rem单位)等随宽度变化。