css之样式重置，移动pc，rem动态js配置，移动端meta。
css样式重置，rem动态设置，移动端表头
- 一、css重置
- 二、移动端html表头
- 三、移动端适配rem动态设置。
- 1.常规配置
- 2.高清压缩版
- 3.高清版源码
- 4.手淘版
- 四、pc端适配rem动态设置。
- 五、媒体查询和常用属性。
一、css重置
html标签有很多默认属性，为了方便布局，一般都会选择重置样式。scss的语法。
body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6,em, i, b, textarea, button, input, select, figure, figcaption {
padding: 0;
margin: 0;
list-style-type: none;
font-style: normal;
text-decoration: none;
border: none;
background: none;
color: #333;
font-size: 14px;
font-weight: normal;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
box-sizing: border-box;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing: antialiased;
&:hover{
outline: none;
}
}
二、移动端html表头
html
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<title>移动端页面配置title>
head>
三、移动端适配rem动态设置。
rem布局还是比较流行的，解决了不同设配屏幕大小问题。
它是根据html根字节大小来适配的。
1.常规配置
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
2.高清压缩版
//阿里的一套动态生成根rem。
! function (e) {
function t(a) {
if (i[a]) return i[a].exports;
var n = i[a] = {
exports: {},
id: a,
loaded: !1
};
return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports
}
var i = {};
return t.m = e, t.c = i, t.p = "", t(0)
}([function (e, t) {
"use strict";
Object.defineProperty(t, "__esModule", {
value: !0
});
var i = window;
t["default"] = i.flex = function (normal, e, t) {
var a = e || 100,
n = t || 1,
r = i.document,
o = navigator.userAgent,
d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),
l = o.match(/U3\/((\d+|\.){5,})/i),
c = l && parseInt(l[1].split(".").join(""), 10) >= 80,
p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi),
s = i.devicePixelRatio || 1;
p || d && d[1] > 534 || c || (s = 1);
var u = normal ? 1 : 1 / s,
m = r.querySelector('meta[name="viewport"]');
m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m
.setAttribute("content", "width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" +
u + ",minimum-scale=" + u), r.documentElement.style.fontSize = normal ? "50px" : a / 2 * s * n + "px"
}, e.exports = t["default"]
}]);
flex(false, 100, 1);
3.高清版源码
'use strict';
/**
* 这个是高清方案。
* @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;
* @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
* @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
*/
const win = window;
export default win.flex = (normal, baseFontSize, fontscale) => {
const _baseFontSize = baseFontSize || 100;
const _fontscale = fontscale || 1;
const doc = win.document;
const ua = navigator.userAgent;
const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
let dpr = win.devicePixelRatio || 1;
if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
// 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
dpr = 1;
}
const scale = normal ? 1 : 1 / dpr;
let metaEl = doc.querySelector('meta[name="viewport"]');
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
doc.head.appendChild(metaEl);
}
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
4.手淘版
(function(win, lib) {
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;
var flexible = lib.flexible || (lib.flexible = {});
if (metaEl) {
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
}if (match) {
scale = parseFloat(match[1]);
dpr = parseInt(1 / scale);
}
else if (flexibleEl) {
var content = flexibleEl.getAttribute('content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
if (initialDpr) {
dpr = parseFloat(initialDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
//如果用户自定了name='viewport'的meat标签，那么通过match获取用户设置的initial-scale，也就是缩放级别，然后获得设置dpr
//如果用户没有设定name='viewport'的meat标签，那么获取flexible.js自身定义的缩放级别来设置dpr
if (!dpr && !scale) {
//检测的当前设备的版本
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
//window.devicePixelRatio 该属性返回当前显示设备的物理像素分辨率与css像素分辨率的比值
//可以通过重写window.devicePixelRatio来更改此属性，例如window.devicePixelRatio=2;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
//判断页面是否存在 metaEl
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
//getBoundingClientRect
//返回一个DOMRect对象，包含一组矩形的集合，该集合内是与该元素相关的css边框集合
// DOMRect
// bottom:8
// height:8
// left:0
// right:520
// top:0
// width:520
// x:0
// y:0
if (width / dpr > 540) {
width = 540 * dpr;
}
//手淘的布局方案默认将屏幕分成十份，当然，如果愿意我们可以对其进行更改
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
// resize 在设备宽度发生改变时触发
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
//pageshow firefox/open的一个事件，在chrome中不会触发
//在页面后退时静态资源会直接重缓存中读取
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
//document.readyState 描述文档的加载状态
// loding 文档仍然在加载中
// interactive 文档已经加载完成并已经被解析，但是图像，框架之类的资源仍然在加载中
// complete 说有资源都已经加载完成，load事件即将被触发
// 在状态改变时document.readyState事件将被触发
if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px';
} else {
//DOMContentLoaded 在文档加载完成后触发，不会等待图像，框架等资源，参考$(function(){}) / $.ready()
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize = 12 * dpr + 'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem;
//rem 2 px 转化方法
flexible.rem2px = function(d) {
var val = parseFloat(d) * this.rem;
if (typeof d === 'string' && d.match(/rem$/)) {
val += 'px';
}
return val;
}
//px 2 rem 转化方法
flexible.px2rem = function(d) {
var val = parseFloat(d) / this.rem;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
})(window, window['lib'] || (window['lib'] = {}));
四、pc端适配rem动态设置。
第一种，推荐
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
let clientWidth = docEl.clientWidth;
let designSize = 100/1920; //默认比例
if (!clientWidth) return;
docEl.style.fontSize = clientWidth * designSize + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
});
第二种
$(window).resize(function ()// 绑定到窗口的这个事件中
{
var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
var wH = window.innerHeight;// 当前窗口的高度
var wW = window.innerWidth;// 当前窗口的宽度
var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
$('html').css('font-size', rem + "px");
});
五、媒体查询和常用属性。
width 可视区域宽度，取值格式为指定宽度或者范围，如 @media (width: 900px){ }
height 可视区域高度，取值格式为指定宽度或者范围，如 @media (max-height: 900px){ }
device-width 设备宽度，取值格式为指定宽度或者范围，如 @media (max-device-width: 5000px) { }
device-height 设备高度 取值格式为指定宽度或者范围，如 @media (max-device-height: 5000px) { }
orientation 设备是竖屏还是横屏模式，可选值有landscape（横屏）、portrait（竖屏），如 @media (orientation: landscape) { }
aspect-ratio 可视区域宽高比，取值格式为水平像素/垂直像素，如@media (device-aspect-ratio:16/9) { }
device-aspect-ratio 设备宽高比，取值格式为水平像素/垂直像素，如@media (device-aspect-ratio:16/9) { }
end