1.初始化HTML中的代码
<meta charset="utf-8">
<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<meta name="renderer" content="webkit">
<!--为了让 IE 浏览器运行最新的渲染模式下-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--SEO三大标签-->
<title>网易云音乐</title>
<meta name="keywords" content="网易云音乐，音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，移动站，music.163.com">
<meta name="description" content="网易云音乐是一款专注于发现与分享的音乐产品，依托专业音乐人、DJ、好友推荐及社交功能，为用户打造全新的音乐生活。">
<!--
apple-touch-icon: 是苹果私有的属性
作用: 指定将网页保存到主屏幕上的时候的图标
-->
<link rel="apple-touch-icon" href="./apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="114x114" href="./apple-touch-icon114.png">
<link rel="apple-touch-icon" sizes="152x152" href="./apple-touch-icon152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon180.png">
<!--网页快捷图标-->
<link rel="icon" href="./favicon.ico">2.利用rem+视口释放的方式来适配移动端
<script>
/*
注意点:
预渲染的本质就是在打包时就"模拟浏览器"提前访问路由对应的网页, 然后将访问的结果写入到.html文件中
但是由于在打包时访问并不是通过"真实的浏览器"来访问, 所以拿不到正是的像素比
所以预渲染时写入到.html文件中的meta就是错误的
也正是因为预渲染的时候已经写入过meta标签了, 而运行的时候又会执行一次JS代码再写入一次
就导致了网页中有两个meta标签
* */
let scale = 1.0 / Math.floor(window.devicePixelRatio);
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
console.log(window.innerWidth);
document.documentElement.style.fontSize = window.innerWidth / 7.5 + "px";
document.documentElement.setAttribute('data-dpr', Math.floor(window.devicePixelRatio) + '');
document.documentElement.setAttribute('data-theme', 'theme');
</script>注意点: 如果在HTML文件中用到了字符串模板, 字符串模板中用到了变量, 那么html-plugin是无法处理的, 所以会报错
如果想解决这个问题, 那么我们需要再借助一个loader, html-loader
1.安装html-loader
npm i -D html-loader
2.配置vue.config.js文件添加（没有则在根目录下新建）
configureWebpack: {
module: {
rules: [
{
test: /\.(html)$/,
exclude: /node_modules/,
use: {
loader: 'html-loader',
options: {
minimize: true
}
}
}
]
}
}3.借助postcss-pxtorem实现自动将px转换成rem（如果不想转换，则写单位“px”的时候要大小P（Px）这样子就不会转化为rem 比如字体样式）
1.安装postcss-pxtorem
npm i -D postcss-pxtorem
2.配置postcss.config.js（没有则在跟目录下新建）
module.exports = {
plugins: {
autoprefixer: {},
'postcss-pxtorem': {
rootValue: 100, // 根元素字体大小
// propList: ['width', 'height']
propList: ['*']
}
}
}4.借助webpack实现CSS3/ES678语法的兼容
在根目录下创建.browserslistrc文件
ie >= 8
Firefox >= 3.5
chrome >= 35
opera >= 11.55.借助fastclick解决移动端100~300ms的点击事件延迟问题
1.安装fastclick
npm install fastclick
2.使用fastclick（在main.js中）
import fastclick from 'fastclick'
fastclick.attach(document.body)6.初始化默认的全局样式
注意点: 在移动端开发中, 一般情况下我们不需要让字体大小随着屏幕尺寸的变化而变化
由于我们是通过视口缩放来适配移动端的, 所以我们不能直接设置字体大小, 否则字体大小就会随着屏幕尺寸的变化而变化
因此需要定义一个方法来设置字体大小@mixin font_size($size)
设置字体大小：@include font_size(50px)
1.在main.js中引入base.scss
import './assets/css/base.scss'2.base.scss
@import "./reset.scss";
@import "./variable.scss";
@import "./mixin.scss";
html, body{
width: 100%;
height: 100%;
overflow: hidden;
// 解决IScroll拖拽卡顿问题
touch-action: none;
}
body{
//设置全局的字体样式
@include font_size($font_medium);
//@include font_size(50px);
//font-size: 50px;
font-family: Helvetica,sans-serif,STHeiTi;
}
img{
vertical-align: bottom;
}2.mixin.scss（存储一些经常使用的方法）
@import "./variable.scss";
/*根据dpr计算font-size*/
@mixin font_dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & { font-size: $font-size * 2;}
[data-dpr="3"] & { font-size: $font-size * 3;}
}
/*通过该函数设置字体大小，后期方便统一管理；*/
@mixin font_size($size){
@include font_dpr($size);
}
// 不换行
@mixin no-wrap(){
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
// 限制行数
@mixin clamp($row){
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:$row;
}3.reset.scss（清空默认的样式）
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
legend{color:#000}
a{text-decoration: none}
#yui3-css-stamp.cssreset{display:none}4.variable.scss（像字体规范的变量）
//字体定义规范
$font_samll:12Px;
$font_medium_s:13Px;
$font_medium:15Px;
$font_large:17Px;
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
