首页 > 其他分享> 文章详细

响应式布局简单知识

2022-08-11 14:32:50 阅读：210 来源： 互联网

标签：body 知识字体大小 Less color 布局响应 rem 200px

响应式布局

1、rem基础

rem单位：是一个相对单位，类似于em，em相对于父元素的字体大小来说的；

rem的基准是相对于 Html 元素的字体大小

优点：可以通过修改html中的大小来控制整个页面字体的大小

2、媒体查询

规则

媒体查询一般按照从大到小或从小到大的顺序来

@media screen and (max-with: 539px){
    body{
        background-color: blue;
    }
}
/*
@media screen and (min-with: 540px) and (max-with: 969px){
    body{
        
    }
}*/
/*CSS的层叠样式*/
@media screen and (min-with: 540px){
    body{
        background-color: green;
    }
}
@media screen and (min-with: 970px){
    body{
        background-color: red;
    }
}

从小到大写，代码更加简洁；

引入外部资源

根据不同的屏幕尺寸引入不同的CSS文件，调用不同的CSS文件

<link rel = "stylesheet" href = "xxx.css" media = "screen and (min-with: 320px)" >
<link rel = "stylesheet" href = "xxx.css" media = "screen and (min-with: 640px)" >

3、Less基础

3.1 Less安装

安装Node.js，官网：http://kik.cn/download/
通过cmd窗口查看是否安装成功及版本号：node -v
使用cmd命令：npm install -g less 对Less进行安装
使用命令了lessc -v看是否安装成功和安装的版本号

3.2 Less的使用

Less变量

定义颜色变量：@变量：颜色；

@color: pink;
/*
    变量定义规则：
        1、不能包含特殊字符；
        2、不能以数字开头；
        3、大小写敏感，区分大小写；
*/
body{
    background-color: @color;
}
div{
    color: @color;
}

Less编译

Easy LESS插件进行将less文件编译成css文件；

Less嵌套

1、子元素可以直接在父元素里面；

.header {
    width: 200px;
    height: 200px;
    a {
        color: pink;
    }
}

2、伪类、交集选择器、伪元素选择器：使用&符号

.header {
    width: 200px;
    height: 200px;
    a {
        color: pink;
        &:hover{
            color: blue;
        }
    }
}

Less运算
```
@border: 5px + 5;
div{
    width: 200px - 100;
    height: （ 200px + 200 ）* 2;
    border: @border solid red;
}
```
注意：
1. 运算符左右两边要用空格隔开；
2. 两个数参与运算，如果只有一个数有的单位，则最后的结果就以这个单位为准；
3. 两个数参与运算，如果两个数都有单位，且是两个不同的单位，最后结果以第一个单位为准；

4、rem适配方案

4.1适配方案1（rem+媒体查询+less技术）

假设设计稿是750px;
假设我们把整个屏幕划分为15等分（划分标准不一定，可以是20份，也可以是10份）；
每一份作为html字体大小，这里就是50px
那么在320px设备的时候，字体大小为320/15，就是21.33px
用我们页面元素的大小除以不同的html字体大小会发现他们比例还是相同的
比如我们以750为标准设计稿
一个100*100像素的页面元素在750屏幕下，就是100/50转换为rem是2rem * 2rem 比例是1比1
320屏幕下，html字体大小为21.33，则2rem = 42.66px，此时的宽和高都是42.66，但宽和高的比例还是1比1
但是已经能实现不同屏幕下，页面元素盒子等比例缩放的效果；

标签：body,知识,字体大小,Less,color,布局,响应,rem,200px
来源： https://www.cnblogs.com/zw-521/p/16575905.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9