移动端知识补充

浏览器私有前缀

-moz-:代表firefox浏览器私有属性

-ms-:代表ie浏览器私有属性

-webkit-:代表Safari,chrome私有属性

-o-:代表Opera私有属性

meta视口标签

在这里插入图片描述

布局详解

流式布局(百分比布局)

在这里插入图片描述

rem布局

rem基础

rem相对于html元素,字体大小来说的
em相对于父元素的字体大小来说的
rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

背景渐变

在这里插入图片描述

媒体查询

在这里插入图片描述

语法规范

在这里插入图片描述1. mediatype媒体类型:将不同的终端设备划分成不同的类型,称为媒体类型
在这里插入图片描述2. 关键字:关键字将媒体类型获多个媒体特性连接到一起作为媒体查询的条件

  • and:可以将多个媒体特性连接到一起
  • not:排除多个媒体类型
  • only:指定某个特定的媒体类型

3…媒体特性
在这里插入图片描述

Less基础

使用less语法的话,需要在编译器(VSCODE)中下载插件Easy LESS

在这里插入图片描述

less变量

@变量名:值

  1. 变量名规范
  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
less嵌套
.header{
  width:200px;
 a {
   color:red;
   }
 }

如果遇见(交集|伪类|伪元素选择器)

  • 内层选择器的前面没有&符号,则它被解析为父选择器的后代
  • 如果有&符号,它就被解析为父元素自身或父元素的伪类

   a{
      color:red;
      &:hover{
         color:blue;
     }
}
less运算

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

注意:

  1. 我们运算符的左右两侧必须敲一个空格隔开
  2. 两个数参与运算,如果只有一个数有单位,则最后的结果就以这个单位为准
  3. 两个数参与运算,如果两个数都有单位,而且不一样的单位,最后结果一第一个数的单位为准
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值