rem布局
em和rem的认识
em: 相对于当前父元素的字体大小>>>1em=父元素标签的font-size
rem: 相对于根元素(html)的字体大小>>>html标签的font-size(浏览器默认的font-size的大小为16px)
rem布局的效果:
- 屏幕越大,标签就越大
- 屏幕越小,标签就越小
rem布局的原理:
通过媒体查询的方式动态改变html标签的font-size的大小
- 当屏幕越大,让html标签的font-size变大即可
- 当屏幕越小,让html标签的font-size变小即可
媒体查询
- 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。
1
2
3
4
5
6
7//语法
<style>
@media mediatype and|not|only (media feature) {
CSS-Code;
}
</style> - mediatype:媒体类型,包含(all,print,screen,speech)
1.all–所有设备
2.print–打印机和打印预览
3.screen–电脑屏幕,平板电脑,智能手机等
4.屏幕阅读器等发声设备
广泛使用的是all和screen
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
1 | <style> |
使用方法
引入css文件
1
2
3
4
5
6//通过mdeia指定媒体类型来实现区别引入css文件
<link rel="stylesheet" href="./css/index.css" media="screen">
//通过mdeia指定媒体类型及条件来区别引入css文件
<link rel="stylesheet" href="./css/index.css" media="screen and (min-width:300px)">style内联样式media指定媒体类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14//通过mdeia指定媒体类型来实现区别当前style是否生效
<style media="screen">
body{
background-color: antiquewhite;
}
</style>
//通过mdeia指定媒体类型及条件来实现区别当前style是否生效
<style media="screen and (max-width: 300px)">
body{
background-color: antiquewhite;
}
</style>style内通过@media实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14//指定媒体类型下的{}内样式生效
<style>
@media screen {
body{
background-color: antiquewhite;
}
}
</style>
//只在IE8下生效
<style>
@media \0screen {body { background: red; }}
</style>
rem适配方案
让⼀些不能等⽐⾃适应的元素,达到当设备尺⼨发⽣改变的时候,等⽐例适配当 前设备。
使⽤媒体查询根据不同设备按⽐例设置html的字体⼤⼩,然后⻚⾯元素使⽤rem 做尺⼨单位,当html字体⼤⼩变化元素尺⼨也会发⽣变化,从⽽达到等⽐缩放的适 配。
公式:页面元素的rem值=页面元素值(px)/(屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是htmlfont-size大小
cssrem
可以自动从px转换为rem
具体步骤
设置里面找cssroot 将cssrem.rootFontSize修改为当前所需要的font-size