一、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){
width: 50%;
三、字体图标
导入：
<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>
<h1 id="title">龙书势如破竹体</h1>
</body>
![一位经验丰富的前端开发人员因未能通过算法面试题而受人嘲笑[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)