网站ui设计是什么,wordpress媒体库显示空白,网站建设改版攻略,赌场网站建站一、rem单位
rem单位#xff08;root em#xff09;是一个相对单位#xff0c;类似em#xff0c;em是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小
比如#xff0c;根元素(html)设置font-size12#xff1b;非根元素设置width: 2rem 则换算成px为24p…一、rem单位
rem单位root em是一个相对单位类似emem是父元素字体大小。
不同的是rem的基准是相对于html元素的字体大小
比如根元素(html)设置font-size12非根元素设置width: 2rem 则换算成px为24px。 二、媒体查询
媒体查询media query是css3的新语法
可以针对不同的屏幕的尺寸设置不同的样式重置浏览器的同时会根据浏览器的宽度和高度重新进行页面的渲染
CSS的弊端CSS实际上是一种非程序式语言没有变量、函数、作用域等相关的概念。 三、LESS的出现 Less是CSS的预处理语言它拓展了CSS的动态特性。
3.3 Less变量
变量名值;
(1) 不可包含特殊字符
(2) 不能由数字开头
(3) 前缀不可以省略
(4)大小写敏感
pinkcolor:pink;body{background-color: pinkcolor;
}
3.4 Less的嵌套
body{background-color: pinkcolor;a{color: pinkcolor;}
}
less嵌套的子元素直接写在父元素里面
伪元素选择器
a{background-color: #fff;:hover{color: #fff;}::before{content“”display: block;}}
3.5 Less的运算
1 我们运算符的左右两侧必须敲一个空格隔开
2 两个数参与运算如果只有一个数带有单位则最后的结果就和带单位的这个一样
3 如果两个数参加运算两个都有单位并且是不一样的单位最后的结果以第一个单位为准
ps甚至颜色也可以进行运算 四、Rem适配方案
1. 让一些不能等比自适应的元素达到当设备尺寸发生变化的时候等比例适配当前设备
2. 使用媒体查询根据不同设备按比例设置html的字体大小让后页面元素使用rem做尺寸单位当html字体大小变化元素尺寸也会发生变化从而达到等比缩放的适配
3. 两种技术方案
1less媒体查询rem
2flexible.jsrem
两种方案目前都存在方案2更简单 1. 首先我们选一套标准尺寸 750为准
2. 我们用屏幕尺寸去除以我们划分的份数 得到html中的文字的大小 但是我们知道不同屏幕下得到的文字大小是不一样的
3. 页面元素的rem值 页面元素在750像素下的px值 / html里面的文字大小 案例旧苏宁易购
项目链接
