pc 端
如何实现字体的自适应
// 根据屏幕大小适配字体
let resetPc = () => {
var wH = window.innerHeight; // 当前窗口的高度
var wW = window.innerWidth; // 当前窗口的宽度
var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值
if (wW > 1366) {
var rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
var html = document.documentElement;
html.style.fontSize = rem + "px"; //适用于PC网站
}
else {
var rem = 1400 * whdef;
var html = document.documentElement;
html.style.fontSize = rem + "px";
}
}
如何 resize window
// resize 屏幕宽度
let resizeWin = () => {
var Width = window.innerWidth//浏览器窗口的内部宽度（包括滚动条）
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var Height = window.innerHeight//浏览器窗口的内部高度（包括滚动条）
|| document.documentElement.clientWidth
|| document.body.clientHeight;
console.log(Width, Height);
}
如何判断所有 img 加载完成
// 判断所有图片是否加载完成
function alertComplete () {
var isImg = false;
var img = document.getElementsByTagName('img');
for (var i = 0; i < img.length; i++) {
if (img[i].complete) {
isImg = img[i].complete;
};
};
return isImg;
}
获取终端类型
var ENV = {}
userAgent = navigator.userAgent;
ENV.inMobile = !!userAgent.match(/applewebkit.*mobile.*/i);// 移动终端
ENV.inAndroid = (userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false; // android终端
ENV.iniPad = (userAgent.match(/(iPad).*OS\s([\d_]+)/)) ? true : false; // iPad终端
ENV.inMac = (userAgent.match(/(Mac\sOS)\sX\s([\d_]+)/)) ? true : false; // iMac终端
ENV.iniPhone = (!ENV.iniPad && userAgent.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false; // iPhone终端
ENV.inIOS = ENV.iniPad || ENV.inMac || ENV.iniPhone; // ios终端
ENV.inSamsung = userAgent.toUpperCase().indexOf("SAMSUNG-SM-N7508V") != -1;
ENV.inWeichat = userAgent.match(/MicroMessenger/i) != null;// 微信内部浏览器
ENV.inSafari = userAgent.indexOf('Safari') != -1; // Safari
ENV.inChrome = userAgent.match(/Chrome/i) != null && userAgent.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;
ENV.inQQBrowser = userAgent.match(/MQQBrowser\/([\d\.]+)/) ? true : false; // QQ浏览器
ENV.inUCBrowser = userAgent.match(/UCBrowser\/([\d\.]+)/) ? true : false;
ENV.inIE = userAgent.match(/Trident/i) != null;// IE内核
ENV.inOpera = userAgent.match(/Presto/i) != null;// opera内核
ENV.inWebKit = userAgent.match(/Applewebkit/i) != null;// 苹果、谷歌内核
ENV.inFireFox = userAgent.match(/Gecko/i) != null && userAgent.match(/khtml/i) != null;// 火狐内核
reset.css
@charset 'UTF-8';
html,body,div,span,applet,object,,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;
font-weight:normal;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
ol,ul,li {
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;
}
th,td {
vertical-align:middle;
}
/* custom */
a {
outline:none;
color:#16418a;
text-decoration:none;
-webkit-backface-visibility:hidden;
}
a:focus {
outline:none;
}
input:focus,select:focus,textarea:focus {
outline:-webkit-focus-ring-color auto 0;
}
p {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
浮动导航实现思路
1. 有一个浮动导航占位符，跟实际浮动导航一样的高度，浮动导航占位符的宽度 width 可以无限大，一般设置为 99999px,足够大，他的父级元素超出隐藏就好了，当实际浮动导航的浮动时，浮动占位符占住原先的位置，防止抖动。
代码如下：
<div id="black-float-nav">
// 导航内容
</div>
<!-- 浮动导航占位符 -->
<div id="float-nav-sticky-holder"></div>
// css
#float-nav-sticky-holder {
width: 999999.99rem;
/* height: 0.6rem; */
line-height: 0.6rem;
display: none;
}
#black-float-nav {
position: fixed;
top: 0;
z-index: 10;
display: none;
width: 100%;
height: 0.6rem;
background-color: black;
overflow: hidden;
}
如何修改 radio 的样式
<label class="group-btn-same customer">
<input class="radio_type" type="radio" name="radio" id="customer">
<label for="customer"></label> <span>单位客户</span>
</label>
/* css 改变 radio 选中样式 */
.radio_type {
display: none;
}
.radio_type+label {
position: relative;
height: 16px;
width: 16px;
border-radius: 50%;
border: 1px solid #999999;
background-color: transparent;
display: inline-block;
top: 0px;
}
.radio_type:checked+label {
position: relative;
height: 16px;
width: 16px;
border-radius: 50%;
border: 1px solid #3F50A9;
background-color: transparent;
display: inline-block;
top: 0px;
}
.radio_type:checked+label:after {
position: absolute;
content: '';
font-size: 0;
border: 6px solid #3F50A9;
border-radius: 50%;
top: 2px;
left: 2px;
}
.radio_type:checked:disabled+label {
border-color: #999999;
}
.radio_type:checked:disabled+label:after {
border-color: #999999;
}
input[type="radio"] {
margin: 0;
}
使用 rem 进行适配
方法一：设置fontsize 按照iphone 5的适配 1em=10px 适配320
// “()()”表示自执行函数
(function (doc, win) {
var docEl = doc.documentElement,
// 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持，可以使用原始的 resize
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 10*(clientWidth / 320) + 'px';
};
recalc();
//判断是否支持监听事件 ，不支持则停止
if (!doc.addEventListener) return;
//注册翻转事件
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
方法二：按照iPhone6的尺寸设计 是375/25=15px
(function (docs, win) {
var docEls = docs.documentElement,
resizeEvts = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalcs = function () {
//getBoundingClientRect()这个方法返回一个矩形对象
window.rem = docEls.getBoundingClientRect().width/25;
docEls.style.fontSize = window.rem + 'px';
};
recalcs();
if (!docs.addEventListener) return;
win.addEventListener(resizeEvts, recalcs, false);
})(document, window);
方式三：采用medi
html {
font - size: 20 px;
}
@media only screen and(min - width: 401 px) {
html {
font - size: 25 px!important;
}
}
@media only screen and(min - width: 428 px) {
html {
font - size: 26.75 px!important;
}
}
@media only screen and(min - width: 481 px) {
html {
font - size: 30 px!important;
}
}
@media only screen and(min - width: 569 px) {
html {
font - size: 35 px!important;
}
}
@media only screen and(min - width: 641 px) {
html {
font - size: 40 px!important;
}
}
h5 适配
zhuanlan.zhihu.com/p/268519512
在网页代码的头部，加入一行viewport元标签
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
宽度不要用绝对的
width:auto; / width:XX%;
字体大小是页面默认大小的100%，即16像素，不要使用绝对大小"px"，要使用相对大小“rem”
html{font-size:62.5%;}
body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }
