移动端笔记

一、如何组织工程结构

本次demo的使用如下工程目录结构

二、如何避免类样式冲突

现代工程可以使用CSS Module、CSS in JS、Scoped CSS等方案解决
传统工程可以考虑使用BEM规范

1. global.css中的类样式必须以g_开头，其他模块文件中的类样式需以模块名_开头。
   
   例1，全局类样式中需要添加一个针对图标的通用样式，可以命名为g_icon
   
   例2，顶部菜单模块中的容器可以命名为top-nav_container
   

   ---

2. 某些类样式是带有状态信息的，此类样式需要在样式名后添加后缀--状态信息
   例：全局类样式中需要制定一个图标，它既包含通用的类样式g_icon，同时又有自己的附属样式信息，因此可以命名类样式g_icon--user。在元素中按照如下方式使用：

<span class="g_icon g_icon--user">span>

如果某些类样式没有前缀信息，则不用添加--，例如：

<ul class="top-news_menu">
    <li>...li>
 	   
    <li class="selected">...li>
    <li>...li>
    <li>...li>
ul>

---

3. 除了全局模块之外，其他模块只能暴露一个顶级样式

错误示例：

.top-nav_container {
     
 	/* 顶部导航容器 */   
}
.top-nav_logo {
     
    /* 顶部导航中的logo */
}
.top-nav_menu {
     
    /* 顶部导航中的菜单 */
}
/* 错误原因：该模块暴露了太多的顶级样式 */

正确示范：

.top-nav_container {
     
 	/* 顶部导航容器 */   
}
.top-nav_container .top-nav_logo {
     
    /* 顶部导航中的logo */
}
.top-nav_container .top-nav_menu {
     
    /* 顶部导航中的菜单 */
}

---

三、如何避免JS变量名冲突

除了提供全局API的JS文件，其他JS文件中的代码都要尽量放到IIFE（立即执行函数中）

// 无须暴露任何API的模块
(function(){
     
  
})();

// 需要暴露一些API的模块
var showPop = (function(){
     
  // 内部的代码
  ...
  
  // 需要暴露的代码
  return ...
})();

---

四、CSS代码太多？

可以考虑使用CSS预编译器LESS减化

在vscode中安装compile hero
设置compile hero选项：

• 取消勾选JavaScript-output-toggle，避免对js造成编译
• 设置LESS-output-directory为./，将LESS编译的结果放到当前目录
• 取消勾选Disable-compile-files-on-did-save-code，这样就可以在保存代码时自动完成编译

---

五、如何让页面中的各种尺寸自适应

需求：设计搞的尺寸需要在各种屏幕上等比缩放

我们需要找到一种单位a，它能和设计稿的尺寸对应起来，比如：1a = 设计稿100px

css3中的rem单位，表示相对于网页根元素的字体大小。

如果能保证根元素的字体大小始终等于设计稿中的100px，则rem就是要找的单位a

---

一个网页，设计稿的宽度是固定的，但运行的设备宽度是不固定的，如何才能保证根元素的字体大小跟随设备视口宽度变化？

设计稿宽度	设备视口宽度	根元素字体大小
700	700	100px
700	350	50px
800	600	75px
750	375	50px

$根元素字体大小 = 设备视口宽度 / 设计稿宽度 * 100$

---

六、img布局的基线问题

在上述这种布局的时候，有时候会发现a标签的高度大于img的高度（即大于60px）。这时可以将img设置为display: block;可解决。因为img是行内元素，默认display: inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是紧贴容器下边缘。将displayp设置为block即可消除上面说的几个像素的差别。