<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
【一】在网页代码的头部，加入一行viewport标签
width - viewport的宽度 - （width=device-width 网页宽度默认等于屏幕宽度）
height - viewport的高度 - （initial-scale=1 原始缩放比例为1.0）
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
所有主流浏览器都支持这个设置。
对于那些老式浏览器（主要是IE6、7、8、9），需要使用css3-mediaqueries.js。
-->
<!-- <meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> -->
<!--[if lt IE 10]>
<scrript src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<!end if-->
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: 16px;
}
</style>
<body>
<!-- 【二】网页宽度css一定要使用百分比width: xx%;，不能用绝对像素。当然可以用width:auto; -->
<style>
.div1 {
width: 500px;
height: 50px;
background-color: antiquewhite;
margin: 1em auto;
}
.div2 {
width: 50%;
height: 50px;
background-color: antiquewhite;
margin: 1em auto;
}
</style>
<div class="div1">我是像素宽度</div>
<div class="div2">我是百分比宽度</div>
<!-- 【三】流动布局 || 弹性布局 -->
<!--
1.自然布局 (html网页默认的布局方式)
2.流动布局 (float)
3.定位布局 (相对定位、绝对定位、固定定位)
-->
<style>
.div3 {
margin: 1em auto;
width: 80%;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
justify-content: center;
-webkit-justify-content: center;
}
.div3 img {
max-width: 100%;
width: 500px;
margin: 0 1em;
}
.div3 div {
max-width: 100%;
width: 500px;
}
</style>
<div class="div3">
<img src="https://pic2.zhimg.com/80/v2-2468fe188032483995c752b0f2aaa6f5_720w.jpg" alt="">
<div>
三年前，新海诚凭借着《你的名字》而被封神，成为既宫崎骏之后又一位极具影响力的动画导演，一度把日本的动漫推到了一个新的高度。让一些不再对感情抱有希望的社畜们再一次感受到爱情的纯粹与美好。2019年的今天，新海诚带着新作《天气之子》再次出现在大众视野。
</div>
</div>
<!-- 【四】图片自适应 -->
<!--
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效
老版本的IE不支持max-width，所以只好写成：img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
例：详见【三】
-->
<!-- 【五】采用相对字体大小 -->
<!--
字体也不能使用绝对大小（px），使用相对大小（em）（rem）
1、px实际上就是像素，与物理像素有一定的区别，用px设置字体大小，比较精确，
但是有缺点，当浏览器页面缩放时，px并不能跟随变大。当前网页的布局就会被打破。
2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以<body>的字体大小作基准的。
em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。
3、rem不同，rem是相对于根元素html,而此时我们只需要以rem为基准就可以了。
-->
<style>
.div4 {
font-size: 32px;
}
.div5 {
font-size: 2em;
}
.div6 {
font-size: 2em;
}
.div7 {
font-size: 2rem;
}
</style>
<div class="div4">我是32PX</div>
<div class="div5">我是2EM<div class="div6">我是子2EM</div>
</div>
<div class="div7">我是2REM</div>
<!--
扩展：
rem 用于字体大小调整的主要问题是，这些值有点难以使用。
可以使用了一个叫做“62.5% ”的技巧。
html { font-size: 62.5%; } /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
-->
<style>
/* 调试需解开 */
/* html {
font-size: 62.5%;
} */
.div8 {
margin-top: 5rem;
font-size: 2.4rem;
}
.div9 {
font-size: 24px;
}
</style>
<div class="div8">我是625技巧后的2.4rem</div>
<div class="div9">我是24px</div>
<img src="./2.jpg" alt="" style="width: 2rem;height: 2rem;">
<img src="./2.jpg" alt="" style="width: 20px;height: 20px;">
<img src="./2.jpg" alt="">
<!-- 【六】CSS的@media规则 及 选择加载css -->
<style>
.div10 {
height: 300px;
border: 1px solid #000;
margin: 0 auto
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (min-width: 1201px) {
.div10 {
width: 1200px
}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
@media screen and (max-width: 500px) {
.div10 {
width: 300px;
}
}
/* 需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。 */
</style>
<div class="div10"></div>
<!--
可以用来加载相应的CSS文件:
<link rel="stylesheet" type="text/css" media="screen and(max-device-width:400px)" href="index.css"/>
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载index.css文件
<link rel="stylesheet" type="text/css" media="screen and(min-device-width:400px)and(max-device-width:600px)" href="index2.css"/>
如果屏幕宽度在400像素到600像素之间，则加载index2.css文件。
-->
</body>
</html>