响应式布局基本响应式布局是一种概念，就是一个网站能够兼容多个终端而不是为每个终端指定一个特定的版本。综合运用三种技术

基本

响应式布局是一种概念，就是一个网站能够兼容多个终端而不是为每个终端指定一个特定的版本。

综合运用三种技术（弹性网格布局、弹性图片/媒体、媒体查询）响应式布局的三个原则：移动优先、@media媒体查询、流式布局。这个原则是copy别人，不知道对不对的。

流式布局就是弹性布局、百分比布局。

媒体查询的用法与参数：媒体查询入门指南 - 学习 Web 开发 | MDN (mozilla.org)

dome

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式</title>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>详细</li>
        <li>产品</li>
        <li>课程</li>
        <li>订单</li>
        <li>关于</li>
        <li>招聘</li>
    </ul>
    <picture>
        <!-- source标签作用：为媒介元素定义媒介资源，允许规定浏览器根据他对媒体类型或解编码器进行选择 -->
        <source srcset="./source/1.jpg" media="(min-width:1000px)">
        <source srcset="./source/2.jpg" media="(min-width:600px)">
        <img srcset="./source/3.jpg">
    </picture>
</body>
<style>
    ul{
        list-style: none;
    }
    ul li{
        display: inline-block;
        width: 60px;
        background-color:rgb(191, 197, 193);
    }
    /* 当屏幕像素大于700px小于1000px的时候，最后一个列表元素不显示 */
    @media only screen and (max-width:1000px) {
        ul li:last-child{
            display: none;
        }
    }
    /* 当屏幕像素小于700px的时候，列表的第三个元素不显示 */
    @media only screen and (max-width:700px) {
        ul li:nth-child(3){
            display: none;
        }
    }
</style>
</html>

面试

与长度相关的问题

rem与em

rem与em都是以页面的字体为参考的长度单位，rem是相对于页面根元素，em是相对于父级元素。

vh/vw

vh可以根据窗口的高度改变大小，vw可以根据窗口的宽度改变大小。1vh=1%height，1vw=1%width。

百分比%

%是相对于父元素的宽度或者高度的单位。

其他：pt

os

虽然在前几天的一场面试中被问到，但是回答时候断断续续，所以总结一下基本的使用方法，在后续可能会做到类似的响应式的项目，有个基本的了解比较好上手。后续有更深的体会继续补充。