rem布局

Source

rem布局

rem单位
rem(root em)是一个相对单位,类似em,em是父元素字体大小
而rem是相对于HTML元素字体大小为基准的。
优点:可以通过修改HTML里面的文字大小来改变页面中元素的大小实现整体控制。
媒体查询(media query)
@media可以针对不同的屏幕尺寸设置不同的样式
语法规范 @media mediatype and|not|only (media feature){css-code;}
mediatype媒体类型:all 用于所有设备 print用于打印机或者打印预览
scree用于电脑屏幕,平板电脑,智能手机等
media-feature媒体特性:width定义输出设备中页面可见区域宽度
min-width**** 最小***** max-width*******最大******** 注:为防止混乱,媒体查询用从小到大书写最为简洁,后面一档会覆盖前一档的效果

示例:@media scree and (min-width:540px){body{}background-color:green;}
实例:<style>@media scree and (min-width:320px){html{font-size:50px}} @medai scree and (min-width:640px){html{font-size:100px;}} .top{height:1rem;font-size:.5rem;background-color:green;color:#fff;}</style>

媒体查询之引入资源
所谓引入资源就是相对于不同的屏幕尺寸调用不同的CSS文件

<link rel="stylesheet" href="***.css" media="scree and (min-width:320px)" >/*翻译:当满足 media="scree and (min-width:320px)的时候引用该css链接*/