【混合开发】 - 2、开发前样式准备

SCSS 预处理器

• SCSS 是SASS 3.0 之后的称呼
• 强化 CSS 的辅助工具，在 CSS 的语法上增加了额外的功能（嵌套、变量、运算、函数……）
• scss没办法直接被浏览器识别，需要转换成css(使用webpack)

1、SCSS 预处理器

1、嵌套

对 CSS 选择器的嵌套

• 如上，有嵌套
• scss里，可以直接用& 表示直接的父标签

2、变量

用变量来存储 CSS 中复用的信息

• $变量名：变量值；

3、函数与运算

自定义函数，用来计算想要的结果

@function 函数名($参数名）{
	@return $px*2 +px
}

• scss里：变量用$标记，关键词 用@标记

2、计算场景

实际开发中，我们希望一套代码适配多种不同像素的设备，无论在pc 或手机上，硬件设备总是存在各种各样不同像素的屏幕，而我们常用的像素值 px 是一个绝对值

目标：定义相同的文字大小，但在不同的设备上应该展示不同的像素数

rem：相对于标签元素 fontSize 大小的单位

• rem是一个相对值，所以可以通过rem来尽量的抹平不同像素设备间展示的差异
• 根据屏幕的宽度定义根元素 fontSize 的大小，让不同的设备拥有不同的根元素大小，不同的设备rem不同
• 但是我们开发的时候没办法准确感知rem的大小，比如0.43的rem是多大，所以 定义函数把像素转化为 rem，把我们能感觉出大小的像素 转换成 无法感觉大小的rem (给函数传入像素，函数生成对应的rem)

1. 根据屏幕的宽度，定义动态的根元素字体的大小
   

• 定义不同屏幕尺寸下对应的rem–html的字体大小

//  src/assets/js/htmlFontSize.js -- 定义不同屏幕尺寸下对应的rem--html的字体大小
// 定义最大的 fontSize
const MAX_FONT_SIZE = 42;

// 监听 html 文档被解析完成的事件
document.addEventListener('DOMContentLoaded', () => {
    
    // 获取 html 标签
    const html = document.querySelector('html');
    // 获取根元素 fontSize 标准，屏幕宽度 / 10
    let fontSize = window.innerWidth / 10;
    // 获取到的 fontSize 不允许超过我们定义的最大值
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;
    // 定义根元素（html）fontSize 的大小 （rem）
    html.style.fontSize = fontSize + 'px';

});

• scss里写一个函数，将像素转为rem

/*---  src/assets/css/dimens.scss  -----*/
// 定义预计根元素 fontSize -> Iphone 6、6s、7、8
$rootFontSize: 375 / 10;

// 定义像素转化为 rem 的函数
@function px2rem ($px) {
    @return $px / $rootFontSize + rem;
}

$titleSize: px2rem(16);
$infoSize: px2rem(14);
$minInfoSize: px2rem(12);
$radiusSize: px2rem(6);
$marginSize: px2rem(8);
$checkSize: px2rem(18);
$listGoodsImgSize: px2rem(100);
// statusBar 的高度
$statusBarHeight: px2rem(22);

3、 初始化样式reset.css 引入

/* --   src/assetes/css/reset.css ----*/
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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* 不指定为0，那么图片之间默认会有一个间距 */
    font-size: 0;
    /* 不允许去选中文本 */
	user-select: none;
	/* IOS 下的滑动卡顿问题 */
	-webkit-overflow-scrolling: touch;
	/* IOS 下点击取消默认高亮效果 */
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

4、配置别名

// vue.config.js
const path = require('path');

module.exports = {
    configureWebpack: config => {
      if (process.env.NODE_ENV === 'production') {
        // 为生产环境修改配置...
      } else {
        // 为开发环境修改配置...
        // 只会在 开发环境中生效，当我们使用 build 去打包一个项目的时候，那么这里的配置不会生效
        // return {
        //     resolve: {
        //         alias: {
        //             '@js': path.resolve(__dirname, './src/assets/js'),
        //             '@css': path.resolve(__dirname, './src/assets/css'),
        //             '@img': path.resolve(__dirname, './src/assets/imgs'),
        //             '@c': path.resolve(__dirname, './src/components'),
        //         }
        //     }
        // }

      }

      return {
          resolve: {
              alias: {
                  '@js': path.resolve(__dirname, './src/assets/js'),
                  '@css': path.resolve(__dirname, './src/assets/css'),
                  '@img': path.resolve(__dirname, './src/assets/imgs'),
                  '@c': path.resolve(__dirname, './src/components'),
              }
          }
      }
    }
  }

5、配置viewport

<!-- public/index.html -->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

• 项目在手机中展示的时候，viewport-可视化区域，width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no 可视化区域宽度 = 设备宽度，初始缩放比例1，最大缩放比例1，不允许用户缩放