几年前
-
PC端页面布局 PC端布局的传统解决方案是基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
-
移动端页面布局
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;
}
}
}
}