rem适配布局，Less语言，响应式布局 | “朝闻道”知识分享大赛

[王怡倩]

这是我参加朝闻道知识分享大赛的第 12 篇文章

rem适配布局

rem单位

是一个相对单位，

• em：是相对于父元素的字体大小

• rem：是相对于html 元素的字体大小

  优点就是可以通过修改html 里面的文字大小改变页面中元素的大小，可以整体控制

媒体查询

• 使用@media 查询，可以针对不同的媒体类型定义不同的样式

• @media 可以针对不同的屏幕设置不同的样式

@media mediatype and|not|only (media feature){
    CSS-Code;
}

mediatype查询类型

1. all：所有设备

2. print ：用于打印机和打印浏览

3. screen：用于电脑，智能手机等

关键字：and|not|only

media feature媒体特性

width min-width max-midth

<style>
    /*这句话的意思就是：在我们屏幕上 并且最大宽度是800px 设置我们想要的样式*/
    /*媒体查询可以根据不同的屏幕储存在改变不同的样式*/
    @media screen and (max-width:800px) {
        bode{
            background-color:pink;
        }
    }
    @media screen and (max-width:500px) {
        bode{
            background-color:purple;
        }
    } 
</style>

实现动态大小变化

CSS弊端

• 需要书写大量看似没有逻辑的代码，冗余度较高

• 不方便维护及扩展，不利于复用

• 没有很好的计算能力

Less语言

是一门CSS预处理语言，扩展了动态特性，是一种新的语言

Less中文网址：http://lesscss.cn/

Less变量

语法：@变量名：值；

@color: pink;
body {
    background-color: @color;
}

Less编译

Less是一种新的语言，不能直接引入到 html 文件中，因此需要将

Less编译成 css 文件，这里需要用到VScode 一个插件 Easy Less 安装即可

Less嵌套

1. 子元素的样式直接写道父元素里面

2. 如果有伪类，交集选择器，伪元素选择器 我们内层选择器前面需要添加 &

Less运算

任何数字，颜色或者变量都可以参与运算。less 提供了加，减，乘，除算术运算

注意：

• 运算符号左右两侧必须加一个空格隔开

• 两个数参与运算，如果只有一个属有单位，则最后的结果就以这个单位为准

• 两个数参与运算，如果两个数都有单位，而且是不一样的单位，最后的结果以第一个单位为准

rem适配方案

1. 让一些不能等比适配的元素，当设备尺寸发生变化时，等比适配当前设备

2. 使用媒体查询根据不同的设备设置 html 字体大小，然后页面元素使用rem 做尺寸单位，当字体大小发生变化时，元素赤尊也会发生变化，从而达到等比缩放

3. 神奇的插件cssrem，将 px 自动转化为 rem

   使用方法：465【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】 https://www.bilibili.com/video/BV14J4114768/?p=466&share_source=copy_web&vd_source=e790b2c6f2917612ba385a9da138c415

swiper插件

用于制作轮播图

使用方法：485【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】 https://www.bilibili.com/video/BV14J4114768/?p=485&share_source=copy_web&vd_source=e790b2c6f2917612ba385a9da138c415

上传码云并发布部署静态网页

准备工作：需要下载git 软件 注册账号

git 可以把我们的本地网站提交上传到远程仓库（码云gitee）里面

码云 就是远程仓库，类似于服务器

响应式布局

原理：使用媒体查询针对不同的宽度的设备进行布局和样式的设置，从而适配不同的设备

响应式布局容器：作为一个父级，来配合子级元素来实现变化效果

尺寸划分

• 超小屏幕——宽度100%

• 小屏幕——宽度750px

• 中等屏幕——宽度970px

• 大屏幕——宽度1170px

Bootstrap前端开发工具

使得Web开发更加快捷

• 中文官网：http://www.bootcss.com/

• 官网：http://getbootstrap.com/

• 推荐使用：http://bootstrap.css88.com/

Bootstrap使用

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

1. 创建文件夹结构

2. 创建 html 骨架结构

3. 引入相关样式文件

4. 书写内容

使用方法：190【前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员】 https://www.bilibili.com/video/BV1kM4y127Li/?p=195&share_source=copy_web&vd_source=e790b2c6f2917612ba385a9da138c415