/**
* sass的基本的使用reset.scss
* base.scss
* DOMContentLoaded:当Dom加载完成
* orientationchange:移动的时候和水平旋转的时候触发
* resize:当调整窗口的时候触发
* http://feg.netease.com/archives/570.html 具体的文档的说明
*/
// js加载
var
docEl =
doc.
documentElement;
var
resizeEvt =
"orientationchange"
in
window ?
"orientationchange" :
"resize";
var
recalc =
function () {
var
clientWidth =
docEl.
clientWidth;
if (
clientWidth >=
360 &&
clientWidth <
375) {
clientWidth =
375
}
if (!
clientWidth) {
return }
docEl.
style.
fontSize =
312.5 * (
clientWidth /
375) +
"%"
};
if (!
doc.
addEventListener) {
return }
win.
addEventListener(
resizeEvt,
recalc,
false);
doc.
addEventListener(
"DOMContentLoaded",
recalc,
false);
// 为了防止js加载的问题,需要配合媒体查询
// 兼容部分机型采用js 设置根节点 font-size 不生效问题
@
media
screen
and(
min -
width: 320
px) {
html{
font - size:
266.667 %; } }
@
media
screen
and(
min -
width: 360
px) {
html{
font - size:
312.5 %; } }
@
media
screen
and(
min -
width: 375
px) {
html{
font - size:
312.5 %; } }
@
media
screen
and(
min -
width: 400
px) {
html{
font - size:
333.333 %; } }
@
media
screen
and(
min -
width: 440
px) {
html{
font - size:
366.667 %; } }
@
media
screen
and(
min -
width: 480
px) {
html{
font - size:
400 %; } }
@
media
screen
and(
min -
width: 520
px) {
html{
font - size:
433.333 %; } }
@
media
screen
and(
min -
width: 560
px) {
html{
font - size:
466.667 %; } }
@
media
screen
and(
min -
width: 600
px) {
html{
font - size:
500 %; } }
@
media
screen
and(
min -
width: 640
px) {
html{
font - size:
533.333 %; } }
@
media
screen
and(
min -
width: 680
px) {
html{
font - size:
566.667 %; } }
@
media
screen
and(
min -
width: 720
px) {
html{
font - size:
600 %; } }
@
media
screen
and(
min -
width: 760
px) {
html{
font - size:
633.333 %; } }
@
media
screen
and(
min -
width: 800
px) {
html{
font - size:
666.667 %; } }
// SASS的项目写法总结
// 基本的使用SASS:
// http://www.ruanyifeng.com/blog/2012/06/sass.html接下来项目实践