专栏首页前端与Java学习前端移动web-day03学习笔记
原创

前端移动web-day03学习笔记

01-rem布局

1.rem介绍 : 相对单位 1rem = html元素字体大小

应用场景 : 适配高度

2.rem与em区别

相同点 : 都是相对单位

不同点: 参考的元素不同

rem:参考的是根元素(html)字体大小 (统一的,一个页面只有一个html)

em:参考的是元素自身字体大小 (不统一,页面的元素字体大小不一定都是一致的)

3.rem使用流程

(1)设置HTML字体大小一般为 屏幕宽度 1/10

* 一般使用js来实现(后期会学习js)

* 导入rem.js

(2)设置cssrem插件的参考值为 当前设计稿的rem

(3)根据UI设计稿,计算rem的值 (cssrem插件自动帮我们计算)

* 例如 : 640设计稿 1rem = 32px rem = px/32

* 例如 : 750设计稿 1rem = 37.5px rem = px/37.5

4.cssrem插件使用

(1)计算元素的rem = 设计稿的px / 设计稿的屏幕的1rem

(2)cssrem插件 : 自动根据px来计算rem

a.安装

b.设置cssrem插件的rem单位为设计稿的rem

c.写样式代码 按照设计稿的px来写, 插件会自动转换成rem

动态修改html字体大小为屏幕 1/10

  • 在实际开发中,一般公司都会设置 1rem = 1/10屏幕宽度
    • 也有的公司会设置1rem = 1/20屏幕宽度
    • 也有的公司会设置1rem = 1/100 屏幕宽度
    • 这个rem的值无论是多少,都不影响它本身的作用:同时适配宽度和高度。所以还是那句话,怎么舒服怎么来
  • rem布局注意点
    • a.一般使用rem布局,都需要设置html字体大小
    • b.实际开发中,一般设置 html字体大小 = 1/10 屏幕宽度

    也就是说,通过动态设置html字体大小,实现 1rem = 1/10 屏幕宽度

    • c.动态设置html字体大小为手机当前屏幕 1/10的两种方式
      • 1.使用js代码(推荐)
      • 2.使用css媒体查询
        • 由于实际开发中一般使用js代码来动态设置html字体大小,实现1rem = 1/10 屏幕宽度,
          • 由于暂时未接触js语言,所以这里老师提前写好一个js文件,我们开发时只需要导入即可

02-Less语法(CSS预处理语言)

1.less语言,css预处理语言

a.浏览器只识别三种语言:html,css,js

b.如果是其他的语言,浏览器不能直接识别,需要转成浏览器可以识别的语言

c.预处理语言:浏览器不能直接识别,需要预先处理成css语言

2.less语言作用:给css加buff(让css更加强大)

*less支持所有的css语法,只是在原有的css功能上添加了一些功能(4-5)

3.less工作流程

*(1)新建一个后缀名为.less的文件

*(2)需要将less预处理成css语言(Eazy LESS)

* 你在less文件中写代码,只要保存,这个插件就会帮你自动生成css更新

*(3)在浏览器中导入“css文件”

less语法-变量

  • 1.变量(variable)作用:存储数据
    • 类似于数学中的字母,例如 a = 10, ax5 = 50.这个a就代表10,好处就是便于维护css代码
  • 2.语法:@变量名 : 值
    • @w:100px,定义一个变量w,存储宽度100px
    • @bgc:hotpink,定义一个变量bgc,存储颜色hotpink
  • 3.注意点:less中的变量可以使用 + - * / 进行数学计算
    • 加:+
    • 减:-
    • 乘:*
    • 除:/

less语法-混合

  • 1.less混合语法作用:在一段css代码中通过类名插入另一端css代码
  • 2.语法: .类名()

less代码如下

.myborder{
    border-top: 5px solid pink;
    border-bottom: 10px solid green;
}
.box{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
    //使用混合语法插入上面一段css代码:  .类名()
    .myborder();
}

预处理之后的css代码

.myborder {
  border-top: 5px solid pink;
  border-bottom: 10px solid green;
}
.box {
  width: 200px;
  height: 200px;
  background-color: yellowgreen;
  border-top: 5px solid pink;
  border-bottom: 10px solid green;
}

==less语法-嵌套==

less嵌套语法作用:将后代选择器写在一个大括号中,提高代码阅读性

less代码如下

.box{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    
    span{//相当于css的后代选择器: .box span
        color: green;
    }

    >span{//相当于css子代选择器: .box>span
        color: purple;
    }

    a{//相当于css后代选择器: .box a
        color: blue;
        &:hover{//less支持多层嵌套,注意伪类前面需要加上&,相当于css: .box a:hove
            color: black;
        }
    }
}

预处理之后的css代码

.box {
  width: 200px;
  height: 200px;
  border: 2px solid red;
}
.box span {
  color: green;
}
.box > span {
  color: purple;
}
.box a {
  color: blue;
}
.box a:hover {
  color: black;
}

less语法-导入

  • 1.less导入语法作用:在一个文件中导入多个css文件,可以减少html文件中link标签数量(提高代码简洁性)
    • 其实就是将多个css文件代码合并到一个css文件中
    • 项目一般是会有多个css文件,那么现在我们使用less的方式来写css,相对来讲,文件数目会翻倍。 如果每个css文件我都导入,那相对来讲是一件非常麻烦的事情,所以我们可以利用LESS中的导入语法
  • 2.导入语法: @imports "需要导入的less文件名;"
    • 注意点
      • a.注意less文件名需要使用双引号引起来
      • b.最后面那个分号不能省略
      • c.后缀名less可以省略
//导入:相当于把多个文件css代码合并到一个css文件中

//将base和index两个文件css代码合并到total文件中

@import "base.less";//后缀名less也可以省略, @import "base"

@import "index.less";

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端移动web-day04学习笔记

    优点 : 全适配 (一个HTML文件就可以适配所有的屏幕 )

    帅的一麻皮
  • JS中的事件循环机制与宏队列、微队列笔记

    为什么JavaScript是一门单线程语言?作为一门浏览器脚本语言,它的主要用途就是操作DOM和与用户交互设计,如果说js是多线程的话,那么它在操作DOM的时候...

    帅的一麻皮
  • 前端day12-JS(WebApi)学习笔记(操作元素属性,事件介绍)

    硬盘代码读取到内存 -> 浏览器渲染引擎生成DOM树(document) -> 开始渲染页面

    帅的一麻皮
  • web移动端适配方案实践

    移动端web页面的开发适配一直是前端开发津津乐道的话题,在实际开发过程中,移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因,下文...

    CS逍遥剑仙
  • web移动端适配方案实践

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    csxiaoyao
  • 【前端艺术】HTML5 Canvas和jQuery实时动态天气预报

    这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用...

    用户5997198
  • HTML5 Canvas和jQuery实时天气预报代码解析「附源码」

    这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效。该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下雪。卡片使用扁平化风格,并使用...

    用户5997198
  • 移动端的box-shadow

    用户7873631
  • html前端之css绘制形状

    纯CSS绘制的图形,有最简单的矩形、圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,非常强大。

    菲宇
  • 奇妙的 CSS shapes(CSS图形)

    Sb_Coco

扫码关注云+社区

领取腾讯云代金券