1.设置视口标签
2.使用媒体查询
3.响应字体
4.响应图片
5.采用百分比
1、媒体查询
1、标签设置
meta标签的设置
1.虚拟窗口：创建虚拟窗口，自定义窗口的大小和缩放功能，能适应移动设备的屏幕大小
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.使用高版本的IE内核浏览器或者Chrome浏览器
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1"> http-equiv = "X-UA-Compatible": 这个是针对ie8以上浏览器的一个属性，ie8以下无法识别。就是说ie8以上浏览器遇到这个属性会执行content的描述，大小写不敏感。
2、使用媒体查询适配对应样式
可以根据设备显示器的特性，来设置不同的css的样式
2、媒体查询的引入方式和语法
1、媒体查询的语法
媒体查询的语法：
@media mediaType and (media feather) {
选择器 {
属性名：属性值
}
}
多个条件：
@media mediaType and (media feather) and (media feather){
选择器 {
属性名：属性值
}
}
mediaType：设备类型
media feather：媒体特性表表达式
1.mediaType设备类型：
all:所有的多媒体设备
print:打印机或打印预览
screen：电脑屏幕、平板电脑、智能手机等
speech：屏幕阅读器等发声设备
2.media feather:媒体特性表达式
width：浏览器的宽度
height:浏览器的高度
max-width：最大宽度
min-width:最小宽度
device-width:设备宽度
device-height:设备高度
max-device-width:最大设备宽度
min-device-width:最小设备宽度
orientation:设备的窗口朝向
1.横屏 宽度比高度大 orientation:landscape;
2.竖屏 高度比宽度大 orientation:portrait;
3.操作符
- and(与、和)
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备)
only: 用来定某种特别的媒体类型。
/* 除了 speech 设备都可以用*/
@media not speech {
body {
background-color: tomato;
}
}
/* 只能在screen设备能用 */
@media only screen {
body {
background-color: yellowgreen;
}
}
媒体查询小案例--只在打印设备显示
<!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>
.txt {
font-size: 30px;
display: none;
}
/* 媒体查询 打印设备 在浏览器中鼠标右击，有打印两个字 点击就可以哦 */
@media print {
.txt {
display: block;
}
}
/* display: none; 隐藏元素
display: block; 显示元素
*/
</style>
</head>
<body>
<p class="txt">你看不见我，只能在打印设备才能看的见我哦</p>
</body>
</html>
2、媒体查询的引入方式
1.内部方式引入
<style>
body {
background-color: red;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: yellow;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: pink;
}
}
</style>
2.外链式
在html的head标签的内部使用link标签引入外部的css文件（后缀名为.css的文件）
<head>
<link rel="stylesheet" href="./css/demo.css">
</head>
body {
background-color: pink;
}
/* 横屏 宽大于高 */
@media screen and (orientation: landscape) {
body {
background-color: tomato;
}
}
/* 竖屏 高大于宽 */
@media screen and (orientation: portrait) {
body {
background-color: yellowgreen;
}
}
<!-- 只有横屏时有样式 -->
<link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: landscape)">
<!-- 只有竖屏时有样式 -->
<link rel="stylesheet" href="./css/demo.css" media="screen and (orientation: portrait)">
3、媒体查询常见的媒体尺寸设置
通过媒体查询，针对不同的设备的尺寸设置断点来改变布局
屏幕 设备 断点 超小屏幕 手机 <768px 小屏幕 平板 >=768px ~ <992px 中等屏幕 桌面 >=992px ~ <1200px 大屏幕 桌面 >=1200px 常用媒体查询尺寸： 1200px 1100px 1000px 1024px 980px 768px 720px 640px 480px 375px 320px 280px
本文含有隐藏内容，请 开通VIP 后查看