1.rem
- 兼容性:目前,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。
2.rem使用方法
- rem是只相对于根元素htm的font-size,即只需要设置根元素的font-size,其它元素使用rem单位设置成相应的百分比即可;
3.meta引入
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
属性名 | 取值 | 描述 |
---|---|---|
width | 正整数 | 定义布局视口的宽度,单位为像素 |
height | 正整数 | 定义布局视口的高度,单位为像素,很少使用 |
initial-scale | [0,10] | 初始缩放比例,1表示不缩放 |
minimum-scale | [0,10] | 最小缩放比例 |
maximum-scale | [0,10] | 最大缩放比例 |
user-scalable | yes/no | 是否允许手动缩放页面,默认值为yes |
其中我们来看width属性,在移动端布局时,在meta标签中我们会将width设置称为device-width,device-width一般是表示分辨率的宽,通过width=device-width的设置我们就将布局视口设置成了理想的视口。
3.媒体查询
- 语法规则:
@media screen and (max-width: 960px){
body{
background-color:#FF6699
}
}
@media screen and (max-width: 768px){
body{
background-color:#00FF66;
}
}
@media screen and (max-width: 550px){
body{
background-color:#6633FF;
}
}
@media screen and (max-width: 320px){
body{
background-color:#FFFF00;
}
}
- 上述代码写了一个常见的区间范围:
分别对分辨率在0~320px,320px~550px,550px~768px以及768px~960px的屏幕设置了不同的背景颜色。
4.rem+媒体查询实现动态元素大小变化
<style>
* {
margin: 0;
padding: 0;
}
@media screen and (min-width:320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width:640px) {
html {
font-size: 100px;
}
}
.topbar {
height: 1rem;
font-size: .5rem;
background-color: aqua;
color: gray;
line-height: 1rem;
text-align: center;
}
</style>
</head>
<body>
<div class="topbar">
购物车
</div>
</body>
- 注意:如果需要引入不同的css文件,这种方式需要用link标签来引入。
<link rel="stylesheet" herf="XXX.css" media="screen and (min-width:320px)">
- 拓展: less可以实现嵌套语法,定义语法,加减乘除语法
5. rem+XXX响应式布局方案
5.1 动态设置html font-size的值
5.2 元素大小的取值方法
5.3 苏宁移动端首页实战
5.3.1搭建文件夹结构
5.3.2 设置视口标签和引公共样式表
- 公共样式CDN:cdnjs.com/libraries/n…
- 本地下载: necolas.github.io/normalize.c…
- 视口标签:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
属性 | 解释说明 |
---|---|
width | 宽度设置的是viewport,可以设置device-width特殊值 |
initial-scale | 初始缩放比,大于0的数字 |
maximum-scale | 最大缩放比,大于0的数字 |
minimum-scale | 最小缩放比,大于0的数字 |
user-scalable | 用户是否可以缩放,yes或no(1或0) |
5.3.3 设置公共的common.less
// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
text-decoration: none;
}
// 一定要写到最上面
html {
font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
@no: 15;
// 320
@media screen and (min-width: 320px) {
html {
font-size: 320px / @no;
}
}
// 360
@media screen and (min-width: 360px) {
html {
font-size: 360px / @no;
}
}
// 375 iphone 678
@media screen and (min-width: 375px) {
html {
font-size: 375px / @no;
}
}
// 384
@media screen and (min-width: 384px) {
html {
font-size: 384px / @no;
}
}
// 400
@media screen and (min-width: 400px) {
html {
font-size: 400px / @no;
}
}
// 414
@media screen and (min-width: 414px) {
html {
font-size: 414px / @no;
}
}
// 424
@media screen and (min-width: 424px) {
html {
font-size: 424px / @no;
}
}
// 480
@media screen and (min-width: 480px) {
html {
font-size: 480px / @no;
}
}
// 540
@media screen and (min-width: 540px) {
html {
font-size: 540px / @no;
}
}
// 720
@media screen and (min-width: 720px) {
html {
font-size: 720px / @no;
}
}
// 750
@media screen and (min-width: 750px) {
html {
font-size: 750px / @no;
}
}
- 在一个less文件中引入另一个less文件,用@import "common"语法
5.3.4 编码
- body 样式
-
整体宽度此时为15rem,15rem * 50px = 750px,让后根据屏幕尺寸让他去自适应
-
盒子的高度根据公式来算:
页面元素rem的计算方式:页面元素的px值 / html 字体大小 50px
- 顶部搜索框代码
- 左边固定,右边固定,中间自适应
左边设置宽高,在进行rem计算,右边设置宽高,中间flex:1就可以实现一个布局
<!-- 顶部搜索框的结构 -->
<div class="search-content">
<a href="#" class="classify"></a>
<div class="search">
<form action="">
<input type="search" value="厨卫保暖季 哒哒哒">
</form>
</div>
<a href="#" class="login">登录</a>
</div>
// search-content 的less样式
@baseFont: 50;
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: 88rem / @baseFont;
background-color:#FFC001;
.classify {
width: 44rem / @baseFont;
height: 70rem / @baseFont;
margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
background: url(../images/classify.png) no-repeat;
// 背景缩放
background-size: 44rem / @baseFont 70rem / @baseFont;
}
.search {
flex: 1;
input {
outline: none;
width: 100%;
border: 0;
height: 66rem / @baseFont;
border-radius: 33rem / @baseFont;
background-color:#FFF2CC;
margin-top: 12rem / @baseFont;
font-size: 25rem / @baseFont;
padding-left: 55rem / @baseFont;
color: #757575;
}
}
.login {
width: 75rem / @baseFont;
height: 70rem / @baseFont;
line-height: 70rem / @baseFont;
margin: 10rem / @baseFont;
font-size: 25rem / @baseFont;
text-align: center;
color: #fff;
}
}
- nav 5宫格代码
<!-- nav模块 -->
<nav>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
<a href="#">
<img src="upload/nav1.png" alt="">
<span>爆款手机</span>
</a>
</nav>
// nav
nav {
width: 750rem / @baseFont;
a {
float: left;
width: 150rem / @baseFont;
height: 140rem / @baseFont;
text-align: center;
img {
display: block;
width: 82rem / @baseFont;
height: 82rem / @baseFont;
margin: 10rem / @baseFont auto 0;
}
span {
font-size: 25rem / @baseFont;
color: #333;
}
}
}
6. rem + flexible.js完美方案
- flexible源码解析
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
注意:此时body为了有版心,需要设置最大宽度不超过750px
body {
min-width: 320px;
max-width: 750px;
/* flexible 给我们划分了 10 等份 */
width: 10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
- 安装cssrem插件用来进修改当前的cssrem,并且再设置中搜索cssrem进行设置html字体大小,由计算稿得出当前html字体大小为75px(屏幕宽度750px / 划分的分数10)
7. 移动端其他补充
7.1 二倍图
7.2 背景缩放和背景二倍图
7.3 两款盒模型
8.Flex伸缩布局
8.1 常见的父项属性
8.1.1 Flex-direction属性
8.1.2 flex-wrap属性
8.1.3 align-times属性
8.1.3 align-content属性
8.1.3 flex-flow属性
- flex-flow属性是flex-direction属性和flex-wrap属性的简写形式, 默认值为row nowrap
总结
8.2 常见子项属性
8.2.1 Flex属性
8.2.2 align-self属性
8.3.3 order属性
9. Bootstrap实战
9.1 Bootstrap的使用
- ①创建文件夹结构
- ②创建Html结构
<!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
- ③ 引入相关文件
- ④ 书写内容
9.2 布局容器
.container类
.container-fluid类
9.3 栅格系统
- rem布局是把屏幕划分成等宽的列,而栅格系统是把页面内容container变成等宽的12列。
9.4 栅格系统参数与基本使用
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>
9.5 栅格系统的列嵌套
- 列嵌套的时候注意给子元素加一个.row可以实现清楚默认的父元素的padding
9.6 栅格系统的列偏移
偏移的份数就是12减去两个盒子的份数