目录
页面适配方案1px兼容
单纯一个方向的边框四个方向的边框 重置样式引入组件库
引入走马灯引入Tab标签页引入步进器 补充
svgcdn引入
页面适配方案
淘宝
;(function(designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
maxWidth = maxWidth || 540;
width>maxWidth && (width=maxWidth);
var rem = width * 100 / designWidth;
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(375, 750);
网易
function font () {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
/* 750/dpi/100 */
/* dip = 物理像素【 750 】/逻辑像素 【 375 】 */
}
font()
window.onresize = font
阿里
(function(doc, win) {
const docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
const clientWidth = docEl.clientWidth;
if (!clientWidth) return;
let max = 24;
let min = 9.3125;
let size = 20 * (clientWidth / 320);
size = Math.min(size, max);
size = Math.max(size, min);
docEl.style.fontSize = size + 'px';
console.log(docEl.style.fontSize, 'em= =====')
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
scss的使用
安装
yarn add sass-loader node-sass -D
定义全局样式【global】
$commonColor:#e54847;
两个scss文件之间的引入
/* 两个scss文件之间的引入---@import,且路径开头不一定要引入~ */
@import '../../assets/global/index.scss';
头部Tab scss样式
header{
width:100%;
height:0.505rem;
background:$commonColor;
}
1px兼容
兼容scss
单纯需要一个方向的边框
代码 @mixin border($color,$pos) {
& {
position: relative;
&:before {
content: "";
position: absolute;
@if $pos==top { left:0; };
@if $pos==left { left:0; };
@if $pos==right { left:0; };
@if $pos==bottom { left:0; };
border-#{$pos}: 1px solid $color!important;
transform-origin: 0 0;
// padding: 1px;
box-sizing: border-box;
pointer-events: none;
}
&:last-child:before {
border-top:none;
}
}
@media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1) {
&:before {
width: 100%;
height: 100%;
transform: scale(1);
}
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
&:before {
width: 200%;
height: 200%;
transform: scale(0.5);
}
}
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
&:before {
width: 300%;
height: 300%;
transform: scale(0.333);
}
}
}
使用 //1.先引入
@import '../../assets/global/border.scss';
//2.在需要的地方调用，传参不用加引号
//@include border( 颜色，边框方向 );
@include border( #ccc,top )
需要四个方向的边框
代码 @mixin borderAll( $color ) {
&{
position: relative;
&:before {
content: "";
position: absolute;
border-top: 1px solid $color!important;
border-left: 1px solid $color!important;
border-right: 1px solid $color!important;
border-bottom: 1px solid $color!important;
transform-origin: 0 0;
left : 0;
top : 0;
box-sizing:padding-box;
pointer-events: none;
}
&:last-child:before {
border-top:none;
}
}
@media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1) {
&:before {
width: 100%;
height: 100%;
transform: scale(1);
}
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
&:before {
width: 200%;
height: 200%;
transform: scale(0.5);
}
}
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
&:before {
width: 300%;
height: 300%;
transform: scale(0.333);
}
}
}
实现 //1.先引入
@import '../../assets/global/border.scss';
//2.在需要的地方调用，传参不用加引号
//@include borderAll( 颜色 );
@include borderAll( #ccc )
重置样式
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;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html,body,#root,.App {
height: 100%;
touch-action: none
}
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;
}
a{
color: #333333;
text-decoration: none;
}
i,b{
font-style:normal;
}
引入组件库
引入走马灯
问题 //报错信息
[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>
解决
在index.css入口文件中加入下面的样式 *{
touch-action: none;
}
如果不要两边的空隙，则只需要删除下面这个组件 <WingBlank>
引入Tab标签页
问题【渲染】 //这里必须要有title属性【这里的title属性就是显示在tab栏的每一项内容】，可是请求到的数据里面没有title属性
const tabs = [
{ title: '1st Tab' },
{ title: '2nd Tab' },
{ title: '3rd Tab' },
{ title: '4th Tab' },
{ title: '5th Tab' },
{ title: '6th Tab' },
{ title: '7th Tab' },
{ title: '8th Tab' },
{ title: '9th Tab' },
];
解决：
将categoryItem赋值给tabs,将里面的name属性赋值给title属性 const tabs = this.props.categoryItem.slice( 0 )
tabs && tabs.map(item => {
item.title = item.name
})
console.log( 'tabs',tabs )
使用代码 import React from 'react'
import { Tabs } from 'antd-mobile';
export default class CategoryList extends React.Component {
//list数据列表
renderList = list => (
list.map(item => {
return (
<li key = { item.api_cid }>
<a>
<img src={ item.img } alt=""/>
<span> { item.name } </span>
</a>
</li>
)
})
)
//floors数据渲染
renderFloor = tab => {
return (
tab.floors.map((item,index) => (
<div className = "tab_title" key = { index }>
<h3> { item.name } </h3>
<ul>
{ this.renderList( item.list ) }
</ul>
</div>
))
)
}
//右边的聂内容渲染
renderContent = tab =>{
console.log( 'tab',tab )
return (
<div style={{ height: '100%', backgroundColor: '#fff',padding:'.1rem' }}>
{ this.renderFloor( tab ) }
</div>
)
}
render() {
// const tabs = [
// { title: '1st Tab' },
// { title: '2nd Tab' },
// { title: '3rd Tab' },
// { title: '4th Tab' },
// { title: '5th Tab' },
// { title: '6th Tab' },
// { title: '7th Tab' },
// { title: '8th Tab' },
// { title: '9th Tab' },
// ];
//解决Tab必须有title属性的问题
/* 将categoryItem赋值给tabs,将里面的name属性赋值给title属性 */
const tabs = this.props.categoryItem.slice( 0 )
tabs && tabs.map(item => {
item.title = item.name
})
return (
<Tabs
tabBarPosition = 'left'
tabDirection = 'vertical'
tabs={tabs}
renderTabBar={props => <Tabs.DefaultTabBar {...props} page={13} />}>
{this.renderContent}
</Tabs>
);
}
}
引入步进器
<Stepper
style
={{ width
: '100%', minWidth
: '100px' }}
showNumber
max
={10}
min
={1}
value
={this.state
.val
}
onChange
={this.onChange
}
/>
补充
svg
好处：减少ajax请求缺点：代码多，造成html污染 font awesome cdn引入
需要加http://
