web前端-移动web开发-rem布局、媒体查询、less

rem

1.页面布局文字会随着页面大小的变化而变化

2.流式布局和flex布局主要是针对于宽度，而rem布局可以对宽度和高度都进行布局

3.屏幕发生变化时，元素的宽度和高度都进行等比例缩放

rem（font size of the root element）是指相对于根元素（html）的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
 

这里先解释下em，下面代码中p的宽高均为120px

		<style type="text/css">
			div{
				font-size: 12px;
			}
			p{
				width: 10em;
				height: 10em;
				background-color: pink;
			}
		</style>

		<div>
			<p></p>
		</div>

下面是rem的用法，元素都相对于html，随着页面的缩放元素也等比例缩放

		<style type="text/css">
			html{
				font-size: 12px;
			}
			div{
				width: 20rem;
				height: 20rem;
				background-color: skyblue;
			}
			p{
				width: 10rem;
				height: 10rem;
				background-color: pink;
			}
		</style>


		<div>
			<p></p>
		</div>

媒体查询

媒体查询可以根据不同的屏幕尺寸来改变不同的样式

		<style type="text/css">
			@media only screen and (max-width:800px ) {
				body{
					background-color: pink;
				}
			}
			@media only screen and (max-width:600px ) {
				body{
					background-color:skyblue;
				}
			}
		</style>

rem+媒体查询

可以实现响应式布局

		<style type="text/css">
			@media only screen and (min-width:320px ) {
				html{
					font-size: 50px;
				}
			}
			@media only screen and (min-width:640px ) {
				html{
					font-size: 100px;
				}
			}
			.top{
				height: 1rem;
				font-size: 0.5rem;
				background-color: springgreen;
				color: white;
			}
		</style>

		<div class="top">
			导航
		</div>

媒体查询：引入资源

根据不同的屏幕设置不同的css样式

		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		</style>
		<link rel="stylesheet" type="text/css" href="css/320.css"/ media="screen and (min-width:320px)">
		<link rel="stylesheet" type="text/css" href="css/640.css"/ media="screen and (min-width:640px)">

		<div>1</div>
		<div>2</div>

less基础

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。http://lesscss.cn/

要使用less先安装node。     http://nodejs.cn/download/

在less环境下安装node命令 。  $ npm install -g less

检测node是否安装成功 node -v

检测less是否安装成功 lessc -v

• less变量

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

  我们需要把less文件编译转换成为css文件，我们才能够使用

• less可以这样嵌套的写，子元素的样式直接写在父元素中

  body{
      background-color: red;
      div{
          background-color: pink;
      }
  }

   

• less中的伪类

• body{
      background-color: red;
      div{
          &:hover{
              background-color: pink;
          }
      }
  }

• less中的计算

  div{
      width: 200px + 50;
      height: 200px * 2;
  }
  img{
      width: 82 / 50px;
  }

  运算符左右两侧都要空格。如果两个都有单位的数参与运算，则运算结果的值取第一个数的单位。

rem适配方案

• rem+less+媒体查询

 

• flexible+rem（简洁高效）

flexible把当前窗口划分为十等份