浏览器现状
PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器等等
总结:兼容移动端主流浏览器,只需要处理webkit内核即可
手机屏幕的现状
移动端设备屏幕尺寸非常多,碎屏化非常严重,常用单位是px
常见移动端屏幕尺寸
移动端调试方法
总结
- 移动端浏览器主要针对于webkit内核即可
- 常见的移动端主要针对于移动端开发
- 移动端碎屏化非常严重,分辨率和屏幕尺寸大小不一样
- 学会用谷歌浏览器模拟手机界面及调试
视口
浏览器是显示页面的屏幕区域
视口:布局视口 视觉视口 理想视口
布局视口
主要是解决早期pc页面在手机上显示的问题,基本都将视口的分辨率设置为980px
视觉视口
网站的区域,不影响布局视口
理想视口
- 理想视口,对设备来讲,是合适的视口尺寸
- 要手动添加meta视口标签来操作视口
- 简单理解为设备有多宽,布局视口有多宽
总结
- 视口是浏览器显示页面的屏幕区域。
- 视口:布局视口 视觉视口 理想视口
- 理想视口对设备来讲,是最合适的视口尺寸。简单理解:就是设备有多宽,布局视口就有多宽
meta标签
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
注意:移动端必须要添加视口标签,否则在在移动端开发中,会遇到诸多问题
标准的viewport
- 设备宽度应当与视口宽度保持一致
- 不允许缩放
- 初始的缩放比例为1
- 最大的缩放比例为1
- 最小的缩放比例为1
物理像素与物理像素比
- 物理像素点是指屏幕中显示的最小颗粒,是物理真实存在的
- 开发过程中,在pc端中1px等于1个物理像素点,但在移动端中,1px不等于1个物理像素
- 1px等于物理像素点的个数,被称为物理像素比
早期的移动端开发,1px等于1个物理像素点,随着视网膜技术的出现,将更多的物理像素点压缩至一块屏幕中,提高屏幕的分辨率,使屏幕看起来更加清晰`
多倍图
实际开发中,图像会在视网膜屏中被放大n倍
我们准备的图像比实际图像大n倍,然后再手动缩小n倍,这样既可以不再让图像模糊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img:nth-of-type(2) {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<!-- 在移动端的实际开发过程中,我们准备的图像比实际的图像大n倍,然后再手动缩小原来的n倍,即可解决图像模糊的问题 -->
<!-- 50*50的图像 -->
<img src="./img/apple50(1).jpg" alt="">
<!-- 100*100的图像 -->
<img src="./img/apple100.jpg" alt="">
</body>
</html>
背景图
background-size:规定背景图像的尺寸
- 单位:长度 | 百分比 | conver | contain
- cover:背景图像扩展至足够大,使背景图片能够完全覆盖背景区域。
- contain:背景图像扩展至最大尺寸,使其高度和宽度完全适应内容区域
注意:只写一个单位,默认为宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 600px;
border: 1px solid red;
margin: 0px auto;
background: url(./img/picture.jpg) no-repeat;
background-size: contain;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景多倍图
与多倍图的做法一致,但容器要缩小至背景图像一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 50px;
height: 50px;
border: 1px solid red;
/* 背景图像:100*100 */
background: url(./img/apple100.jpg) no-repeat;
margin: 0px auto;
background-size: 50px 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
移动端开发选择
单独制作移动端页面
- 京东商城手机版
- 淘宝触屏版
- 苏宁易购手机版
网站区域前面加上m,即可打开移动端页面
响应式页面兼移动端
三星官网
核心:根据判断屏幕的宽度来改变样式,以适应不同的终端
响应式制作页面比较麻烦,需要花很大精力去调兼容性问题
总结
- 兼容移动端页面只需兼容webkit内核
- 可以放心的使用h5和css3的新特性
- 浏览器的私有前缀只需要添加webkit即可
移动端技术解决方案
引进css初始化样式: normalize.css
官方下载:https://necolas.github.io/normalize.css/8.0.1/normalize.css
特殊样式
CSS盒子模型
- 传统的盒子模型:盒子的宽度 = width + padding + border
- css3盒子模型:盒子的宽度 = width(border+padding)
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;
注意:移动端可以放心的使用css3盒子模型,pc端不考虑兼容性的话,也可使用css3盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
height: 800px;
padding: 20px;
margin: 20px auto;
background-color: purple;
border: 5px solid red;
/* 引进css3盒子模型 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
去除高亮效果
-webkit-tap-highlight-color: transparent;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<a href="#">尧子陌</a>
</body>
</html>
按钮自定义样式
-webkit-appearance: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
input {
-webkit-appearance: none;
}
</style>
</head>
<body>
<input type="button" value="尧子陌">
</body>
</html>
禁止页面长按弹出菜单
-webkit-touch-callout: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img,
a {
-webkit-touch-callout: none;
vertical-align: middle;
}
</style>
</head>
<body>
<img src="./img/apple100.jpg" alt="">
<a href="https://www.baidu.com/">百度</a>
</body>
</html>
移动端常见布局
单独制作移动端页面(主流)
- 百分比布局
- flex布局
- rem + less + 媒体查询
- 混合布局
响应式页面兼容移动端
- 媒体查询
- bootstarp
流式布局
- 流式布局:百分比布局,也称非像素固定布局
- 宽度设置成百分比,不受固定像素的限制,内容向两侧延伸
- 百分比布局是移动web开发常见的布局方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 100px auto;
border: 1px solid red;
}
div {
width: 50%;
float: left;
height: 150px;
background-color: rgb(223, 25, 25);
}
div:nth-of-type(2) {
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>