rem布局
rem 主要是为了解决字体随屏幕变化，flex上的高度问题，实现高度和宽度等比例缩放
- rem其实是一个单位 ，
- 是个相对单位 root em。类似em。em指的是父级字体大小，顾名思义，我们的rem就是root（根元素的大小）->根元素 ，相对于html元素的字体大小的单位。
- rem布局的原理，就是根据一个html根元素来控制，网页的布局，实现类似于自适应等比例的缩放的布局。
- rem优势，通过修改html文字的大小，来改变页面中元素的大小，实现了页面的整体控制
html {
font-size: 12px;
}
div {
font-size: 12px;
width: 15rem;
height: 15rem;
background-color: purple;
}
p {
/* 1. em相对于父元素 的字体大小来说的 */
/* width: 10em;
height: 10em; */
/* 2. rem 相对于 html元素 字体大小来说的 */
width: 10rem;
height: 10rem;
background-color: pink;
/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
}媒体查询
Media query是css3的语法，实现了针对不同屏幕尺寸设置了不同的样式，（@media）
@media mediatype and|not|only (media feature) {
CSS-Code;
}/我们通过下面的代码来实际的体会以下，其中的奥妙特别需要强调！！！经验之谈；一个建议： 我们媒体查询最好的方法是从小到大
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
/*
@media mediatype and|not|only (media feature) {
CSS-Code;
}
mediatype是指媒体的类型，有三个值，最常用的就是screen意为 在屏幕上
and（可以将多个媒体特性连接到一起‘且’），ont（排除某个媒体类型‘非’），only，媒体特性
*/
/*先看我们的需求：我们需要睡着屏幕的大小 变化，来展示不同的样式。
具体就是，540下的是蓝色，540-970之间是绿色。970以上的是红色*/
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */结合rem + media query
结合媒体查询和rem我们可以实现更人性化的页面。
* {
margin: 0;
padding: 0;
}
/* html {
font-size: 100px;
} */
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}- 这里又有一个问题了，到底给元素多大的rem呢？
- 比如说这里有这样的一个需求：html大小写定了就是50px，设计图原稿的图片是82*82的，那么你给多大的rem给img呢？
- 解决：82/50 = 需要的rem
媒体查询--引入资源
主要是意思就是，给不同的屏幕情况指定引入不同的css样式
意识就是一套一套的css
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">less & sass
- 注意一下，这里的less和sass都是扩展了css东西，less是一种动态样式语言，对css赋予了动态语言的特性，比如变量、继承、运算、函数，既可以运行在客户端，也可以运行在服务器端，依赖JavaScript
- sass是一种动态语言，属于缩排语法，比css多出很多功能，比如变量、嵌套、运算、混入、继承、函数等，更容易阅读；
- 它的出现解决了之前的需要计算rem的繁琐问题
less
- css的扩展语言，也叫作css预处理器。
- 注意一下，要使用他们需要安装node，安装之后，通过npm来安装less ，sass也是一样的操作，注意，安装的时候需要旋转，全局安装-g
- 在vs里面新建一个xxx.less文件
以下的是less使用流程
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}以上的代码保存在xxx.less中
- 你需要编译less文件，把它转化成css之后，生成xxx.less（同名css文件），页面才能正常的引入使用
- 编译器插件（vs中）Easy LESS
- 写完les之后，并且确保你安装了less和编译器，ctrl+s一下就能自动在目录生成同名的css文件了
关于更多的less语法，请你点击这里less官网
/*最常见的语法就是，变量，嵌套子元素样式，运算。
其他的都比较好理解，就是有一个需要特别小心的地方，就是选择器*/
/*如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接*/
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1. less嵌套 子元素的样式直接写到父元素里面就好了，
a {
color: red;
// 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
// 如果你不写，less默认就是全部都后代选择器
&:hover {
color: blue;
}
}
}
.nav {
.logo {
color: green;
}
&::before {
content: "";
}
}
- 关于我们的运算，跟数学中的四则运算是一样一样的。但是你需要注意：
// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
