前端-Web移动端适配值rem和sass

网页前端
  1. 1. 安装node.js
  2. 2. 安装node-sass
  3. 3. 安装webpack
  4. 4. 安装sass-loader
  5. 5. 配置环境变量
  6. 6. 项目目录下安装
  7. 7. sass基本用法
  8. 8. webpack基本用法
  9. 9. rem单位的说明
  10. 10. reset.css
  11. 11. index.scss
  12. 12. app.js
  13. 13. index.html
  14. 14. 测试
  15. 15. 注意点

安装node.js

https://nodejs.org/en/

安装node-sass

1
npm install node-sass -g

安装webpack

1
npm install webpack -g

安装sass-loader

1
npm install sass-loader -g

配置环境变量

1
2
3
Path追加(安装路径)
例如：
C:\Users\admin\AppData\Roaming\npm

项目目录下安装

  • 创建package.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "name": "TestApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zhouzhuo810",
  "license": "ISC",
  "dependencies": {
    "css-loader": "^0.28.7",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.8.1"
  },
  "devDependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "webpack": "^3.10.0"
  }
}
  • 项目下执行命令
1
npm install sass-loader node-sass webpack css-loader style-loader url-loader --save-dev

sass基本用法

  • 嵌套

Sass允许嵌套规则，使CSS更易于维护。

  • &

Sass 提供了 & 用于引用父选择器。

  • @import

Sass 的 @import 指令用于导入其他样式模块。

  • 运算

Sass 支持对数字标准的算术运算(加法 +，减法 - ，乘法 *，除法 / 和取模 %) 并保留单位。

  • 注释

单行注释 // 会在 .scss 被编译成 .css 后移除。
多行注释 /* */ 会在 .scss 被编译成 .css 后保留。

  • 编译

假设项目目录下有 css 和 scss 文件夹，运行以下命令会持续观察文件变化并即时编译。

1
node-sass -wro css scss

在终端按 Control + C 停止编译。

webpack基本用法

//webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var webpack = require('webpack');
var path = require('path');
module.exports={
	entry: [
		'./app.js'
	],
	output:{
		path: path.resolve(__dirname, './build'),
		filename: 'bundle.js'
	},
	module: {
		loaders: [
			{ test: /\.css$/, loader: 'style-loader!css-loader'},
			{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader'},
			{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
		]
	}
}
  • 执行命令
1
webpack --watch

rem单位的说明

  • rem是一个单位，可以代替px。
1
1 rem = html[0].style.fontSize px;

当不设置font-size时，默认的font-size为第一个html元素的font-size，用js动态设置第一个html元素的font-size属性即可动态改变rem对应的px大小。

reset.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
  
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

index.scss

1
2
3
4
5
6
7
8
9
10
@function px2rem($px) {
	$rem: 37.5px;
	@return ($px / $rem) + rem;
}
  
.header {
	height: px2rem(40px);
	width: 100%;
	background-color: red;
}

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
require('./index.scss');
  
//窗口宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  
//html根元素
let htmlDom = document.getElementsByTagName('html')[0];
  
//设置html根元素的font-size
htmlDom.style.fontSize = htmlWidth / 10 + 'px';
  
//监听窗口大小变化，动态缩放
window.addEventListener('resize', (e) => {
	let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
  //设置根元素html的font-size即1 rem，为屏幕宽度的1/10
	htmlDom.style.fontSize = htmlWidth / 10 + 'px';
});

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initail-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
	<title>测试</title>
	<link ref="stylesheet" type="text/css" href="./reset.css"/>
</head>
<body>
  
	<div class="header">
      测试头部
	</div>
	<script type="text/javascript" src="./build/bundle.js"></script>
</body>
</html>

测试

1
webpack --watch

注意点

1
2
3
4
5
div {
	width:100%;
	padding-left:20px;
	padding-right:20px;
}

100%宽度时，如果有左右内边距，会在使移动端界面产生左右滑动；

需要添加：

1
2
3
4
5
div {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}

使为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

网页前端
prev： next：