几年前

1. PC端页面布局 PC端布局的传统解决方案是基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2. 移动端页面布局

   2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持

现在

pc和移动端都可以使用flex布局, 特殊情况下才需要使用传统布局

(2) PC端样式内容宽度

pc端的主体内容一般会设置一个宽度, 大多数是1200px

.container {
	width: 1200px;
    margin: 0 auto;
}

(3) PC端不需要特别设置viewport使用默认配置即可

(4) 移动端需改动一下viewport配置

<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>

(5) less代码

less代码设置样式

// 头部
header {
    height: 100px;
    background-color: #fff;
    padding-left: 40px;
    padding-right: 40px;

    img {
        height: 64px;
    }

    .login {
        .item {
            // 加粗
            font-weight: 600;
            // 手势
            cursor: pointer;
            border: 1px solid #2486ff;
            padding: 8px 15px;
            border-radius: 20px;

            &:hover {
                background-color: #2486ff;
                color: #fff;
            }
        }
    }
}