rem适配布局+响应式布局
REM适配方案–布局
less语法 + rem适配布局
rem基础
-rem是一个相对html根元素字体大小的单位
-em是一个相对父元素字体大小的一个单位
-rem的优点 :可以控制html的文字大小从而可以使得页面中的元素大小被整体控制
媒体查询
-html中的字体大小不应该写死 通过媒体查询来解决
-媒体查询可以i针对不同的屏幕尺寸设置不同的样式
-语法: @media mediatype and|not|only (media feature)
{
css code
}
注意:1.@media 开头
2.mediatype 媒体类型: all【所有设备】、 print【用于打印机】、screen【用于电脑屏幕】
3.三个关键字 and not only
4.(media feature) 媒体特性 必须有小括号包含 :with【设备页面可见区域的宽度】、min-with、max-with
eg:
@media screen and (max-width:800px) {
/* 在我屏幕上并且最大宽度是800px【小于等于800px】 设置我们想要的样式 */
body {
background-color: pink;
}
}
-媒体查询书写一般按照从小到大或者从大到小的顺序来
-媒体查询条件有多 用 and 连接
-数字后面必须跟单位
媒体查询和rem共同作用实现元素动态变化
-引入资源:屏幕在不同宽度尺寸时 用不同的css样式文件
原理:直接在link中判断设备的尺寸 然后引入不同的css文件
-eg:
<link rel="stylesheet" href="第一个样式文件" media="screen and (min-width:320px)">
<link rel="stylesheet" href="第二个样式文件" media="screen and (min-width:720px)">