一、1.viewport视口设置
<!-- viewport:视图接口设置，PC端浏览器会自动忽视这行代码，移动端浏览器会根据
这行代码对页面视口进行设置 -->
<!-- 默认情况下，移动端浏览器打开网页时为了显示全部内容，会将页面进行缩小，如果一个网页是专门针对移动端设计的页面，不需要让浏览器缩小，则需要进行viewport设置，将width设置为device-width, initial-scale=1.0 -->
<!-- user-scalable=no 这个设置不允许用户进行手指缩放 -->
<meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0，user-scalable=no"
>
<meta
http-equiv
=
"X-UA-Compatible"
content
=
"ie=edge"
>
<title>
viewport视口设置
</title>
</head>
<body>
<!-- viewport:视图接口 -->
<h1>
viewport用于页面视口设置，是专门的针对移动端浏览器进行的设置
</h1>
<!-- 2.对于移动端页面，有两种实现方案： -->
<!-- 第一种，网站PC端页面和移动端页面完全分开做，根据用户的访问设备类型，给用户d返回不同的页面（目前大多数网站都是
采用的此方案） -->
<!-- 第二种，响应式布局，页面本身能够根据浏览器的窗口的宽度进行不同的布局 -->
二、媒体查询和响应式页面
/* 媒体查询是响应式页面实现的基础 */
/* @media 设置媒体查询，设置一些样式仅在某些条件下生效 */
/*max-width:900px 当窗口宽度（最大900）小于900px时 ,生效 */
@media(max-width:900px){
.box{
width: 33.33%;
}
main{
width: 500px;
}
@media(max-width:600px){
.box{
width: 50%;
}
main{
width: 500px;
}
三、字体图标
导入：
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<!-- 使用字体图标作为小图片，可以无限放大，还可以设置颜色 -->
class="fa fa-名称"
<!--1. 固定样式：前一个fa主要设置字体必须有 -->
<!-- <span class="fa fa-名称"></span> -->
<span
id
=
"icon"
class
=
"fa fa-bed"
></span>
我的家乡
<br>
<!-- 又加了旋转动画 fa-spin-->
<!-- 2.<span class="fa fa-cog
fa-spin
"></span> -->
<span
class
=
"fa fa-cog fa-spin"
></span>
四、自定义字体
<style>
/* @font-face，引入一个外部的字体文件，其中至少需要写src和font-family
，src表示引入的文件路径，font-family为这个字体起一个名字 */
@font-face
{
src
:
url
(
cjs.ttf
);
font-family
:cjs;
}
#title
{
font-family
: cjs;
}
</style>
</head>
<body>
<h1
id
=
"title"
>
龙书势如破竹体
</h1>
</body>
