工作中遇见的CSS问题或JS技巧
rem 计算
rem等比缩放样式
方案1
@media screen and (min-width: 320px) {html{font-size:50px;}}@media screen and (min-width: 360px) {html{font-size:56.25px;}}@media screen and (min-width: 375px) {html{font-size:58.59375px;}}@media screen and (min-width: 400px) {html{font-size:62.5px;}}@media screen and (min-width: 414px) {html{font-size:64.6875px;}}@media screen and (min-width: 440px) {html{font-size:68.75px;}}@media screen and (min-width: 480px) {html{font-size:75px;}}@media screen and (min-width: 520px) {html{font-size:81.25px;}}@media screen and (min-width: 560px) {html{font-size:87.5px;}}@media screen and (min-width: 600px) {html{font-size:93.75px;}}@media screen and (min-width: 640px) {html{font-size:100px;}}@media screen and (min-width: 680px) {html{font-size:106.25px;}}@media screen and (min-width: 720px) {html{font-size:112.5px;}}@media screen and (min-width: 760px) {html{font-size:118.75px;}}@media screen and (min-width: 800px) {html{font-size:125px;}}@media screen and (min-width: 960px) {html{font-size:150px;}} 方案2
@media screen and (min-width: 320px) {html{font-size:312.5%;}}@media screen and (min-width: 360px) {html{font-size:351.5625%;}}@media screen and (min-width: 375px) {html{font-size:366.211%;}}@media screen and (min-width: 400px) {html{font-size:390.625%;}}@media screen and (min-width: 414px) {html{font-size:404.2969%;}}@media screen and (min-width: 440px) {html{font-size:429.6875%;}}@media screen and (min-width: 480px) {html{font-size:468.75%;}}@media screen and (min-width: 520px) {html{font-size:507.8125%;}}@media screen and (min-width: 560px) {html{font-size:546.875%;}}@media screen and (min-width: 600px) {html{font-size:585.9375%;}}@media screen and (min-width: 640px) {html{font-size:625%;}}@media screen and (min-width: 680px) {html{font-size:664.0625%;}}@media screen and (min-width: 720px) {html{font-size:703.125%;}}@media screen and (min-width: 760px) {html{font-size:742.1875%;}}@media screen and (min-width: 800px) {html{font-size:781.25%;}}@media screen and (min-width: 960px) {html{font-size:937.5%;}} 方案三
var designWidth = 640, rem2px = 100;document.documentElement.style.fontSize = ((window.innerWidth / designWidth) * rem2px) + 'px';
方案4
var designWidth = 640, rem2px = 100;document.documentElement.style.fontSize = ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';
居中方式
absolute配合tranform
.parent { position: relative;}.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} flex
.parent { display: flex; justify-content: center; align-items: center;} absolute配合定位值 .parent { position: absolute; left: 0; right: 0; top: 0; bottom: 0;} 文字换行
.word-wrap { word-break: break-all; overflow: auto;} 移动端1px问题
div:after { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #D9D9D9; color: #D9D9D9; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5);} iOS局部使用弹性滚动效果
iOS自带的全局滚动中有自带的弹性滚动，而局部滚动没有。
iOS启动局部滚动使用弹性滚动效果body { -webkit-overflow-scrolling: touch;}/* 局部滚动的dom节点 */.scroll-el { overflow: auto;} 将属性挂在body上，可以避免很多奇怪的bug
出界
什么情况下会触发出界？
- 全局滚动滚动到页面顶部（或底部）时继续向下（向上）滑动，就会出现
- 局部滚动滚动到页面顶部（或底部）时，
手指离开停下，再继续向下（向上）滑动，就会出现
iOS解决方案：
局部滚动：使用组件
核心代码：
if (startTopScroll <= 0) { elem.scrollTop = 1}if (startTopScroll + elem.offsetHeight >= elem.scrollheight) { elem.scrollTop = elem.scrollheight - elem.offsetHeight - 1 } 注意：页面的固定区域禁止touchmove默认事件
android使用局部undong，会导致滚动条显示异常，且滚动不流畅。
Android下建议只使用全局滚动
页面流畅滚动的方法
- body上加上
-webkit-overflow-scorlling: touch - iOS尽量使用局部滚动
- iOS引进
ScrollFix避免出界 - Android下尽量使用全局滚动尽量不用
overflow: auto使用min-height: 100%代替height: 100% - iOS下带有滚动条且
position: absolute的节点不要设置背景色
input唤起纯数字软键盘
通过input的type属性来唤起纯数字软键盘
其它pattern属性值并不支持
关闭首字母大写
定制软键盘的行为：
配置input节点的autocapitalize,autocorrect属性 输入英文用户名首字母自动大写
// 关闭首字母大写autocapitalize="off"
autocorrect属性值的效果：
重复特殊字符
new Array(num).join('*') // 重复num个* JS全排列
递归方式:
function premutate (str) { var result = [] if (str.length > 1) { var left = str[0] var rest = str.slice(1, str.length) var preResult = premutate(rest) for (var i = 0; i < preResult.length; i++) { for (var j = 0; j <= preResult[i].length; j++) { var tmp = preResult[i].slice(0, j) + left + preResult[i].slice(j, preResult[i].length) result.push(tmp) } } } else if (str.length === 1) { return [str] } return result } URL结构
┌─────────────────────────────────────────────────────────────────────────────────────────────┐│ href │├──────────┬──┬─────────────────────┬─────────────────────┬───────────────────────────┬───────┤│ protocol │ │ auth │ host │ path │ hash ││ │ │ ├──────────────┬──────┼──────────┬────────────────┤ ││ │ │ │ hostname │ port │ pathname │ search │ ││ │ │ │ │ │ ├─┬──────────────┤ ││ │ │ │ │ │ │ │ query │ │" https: // user : pass @ sub.host.com : 8080 /p/a/t/h ? query=string #hash "│ │ │ │ │ hostname │ port │ │ │ ││ │ │ │ ├──────────────┴──────┤ │ │ ││ protocol │ │ username │ password │ host │ │ │ │├──────────┴──┼──────────┴──────────┼─────────────────────┤ │ │ ││ origin │ │ origin │ pathname │ search │ hash │├─────────────┴─────────────────────┴─────────────────────┴──────────┴────────────────┴───────┤│ href │└─────────────────────────────────────────────────────────────────────────────────────────────┘
iOS的300ms延迟
使用fastclick库解决
import FastClick from 'fastclick'if ('addEventListener' in document) { document.addEventListener( 'DOMContentLoaded', () => { (FastClick as any).attach(document.body) }, false, )} 导入和导出
Node方式导入对应导出 一个JavaScript文件，可以向外exprots无数个变量，函数，对象，但是require(); 的时候，仅仅需要 载入一次JS文件即可。 所以，无形之后，会增加一个顶层命名空间。
导入一个空模块，是一个空对象,一个模块就是一个对象。
导出方式：
-
exports, 导出整个式子 -
module.exports, 导出赋值部分
导入方式：
reuire()
// 导出一个变量exports.a = 10;// 导入该变量let b = require('./export')// 导入的形式 `console.log(b)`输出导入的值：// { a: 10 } // 导出一个变量，直接需要变量值使用.// module.exports = 'name';// 导入该变量let b = require('./export')// 导入的形式 `console.log(b)`输出导入的值：// name // 导出对象module.exports = { name1: 123, name2: 456}// 导入该变量let b = require('./export')// 导入的形式 `console.log(b)`输出导入的值：// { name1: 123, name2: 456 } // 导出对象exports.msg = { name1: 1, name2: 2}// 导入该变量let b = require('./export')// 导入的形式 `console.log(b)`输出导入的值：// { msg: { name1: 1, name2: 2 } } // 导出函数exports.showMsg = function () {}// 导入该变量// let b = require('./export')// 导入的形式 `console.log(b)`输出导入的值：// { showMsg: [Function] }// 在 引用结果 需要 通过 变量 引用对象 执行// var b= require();// b.showMsg(); // 导出函数module.exports = function () {}// 导入该变量let b = require('./export')// 导入的形式 `console.log(b)`输出导入的值：// [Function]// 引入文件的 变量 直接执行 对象,函数常使用的导出方式：module.exports
ES6和Typescript方式导入对应导出
导出：export
import 注意点:
- 导出和导入，除了使用
as之外，变量名相同 - 导出一个文件，默认是一个空对象
- 直接使用导入文件定义变量名，直接执行
-
default导出，在导入的时候可以取任意变量名 -
export default默认导出模块不能使用{}对象导出
// 导出一个常量export const foo = Math.sqrt(2)// 导入import { foo } from './export' function myFunction () {}// 导出已经声明的函数export { myFunction }导入import { myFunction } from './export' // 多个导出export function cube(x: number): number { return x * x * x}const foo: number = Math.PI * Math.sqrt(2)export { foo } // 导出多个// 导入import { cube, foo } from './export' // 导出函数export default function () {}export default function fun () {}// 导入import myFunction from './export' // 可以取任意变量名// 如果导出默认，定义函数名或者变量名，或者类名// 导入的时候可以写和原来相同名字，也可以取任意变量名 // 导出类export default class {}// 导入import Test from './export' 一个文件（模块）默认的导出只能有一个， 可以是类，函数， 对象等
导入整个模块的内容，在当前作用域插入export变量，包含export文件中全部导出绑定(包括export default):
// 导出多个模块export function query () {}export function update () {}// 导入import * as API from './export' 将整个模块作为附加功能导入， 但是不导入模块的导出成员:
import 'my-module'