CSS_JS_Tips

张春雷发布于2019-08-29 12:56 / 1116人阅读

摘要：所以，无形之后，会增加一个顶层命名空间。导入一个空模块，是一个空对象一个模块就是一个对象。

工作中遇见的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解决方案：

局部滚动：使用ScrollFix组件

核心代码：

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"

GPU云服务器云服务器 CSS_JS_Tips

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112254.html

CSS_JS_Tips

摘要：所以，无形之后，会增加一个顶层命名空间。导入一个空模块，是一个空对象一个模块就是一个对象。工作中遇见的CSS问题或JS技巧 rem 计算 rem等比缩放样式方案1 @media screen and (min-width: 320px) {html{font-size:50px;}} @media screen and (min-width: 360px) {html{font-s...

liukai90 2019-08-01 17:08 评论0 收藏0

发表评论

登陆后可评论

0条评论

张春雷

男|高级讲师

我要关注我要私信

TA的文章

鲸鱼数据：江西NAT VPS,1核/512MB内存/5GB SSD空间/1TB流量/100Mbps端

阅读 1605·2021-09-23 11:31
开源早读课周刊（第 9 期）：腾讯的开源稳步推进

阅读 919·2021-09-23 11:22
如何评主机地址-电脑主机名或IP地址怎么查？

阅读 1336·2021-09-22 15:41
Linux驱动开发：汇编LED灯实验（I.MX6UL芯片）

阅读 4061·2021-09-03 10:28
Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

阅读 2906·2019-08-30 15:55
记录

阅读 3536·2019-08-30 15:55
CSS实现8种炫酷按钮

阅读 1938·2019-08-30 15:44
微信小程序教学第四章第一节（含视频）：小程序中级实战教程：详情-页面制作

阅读 2712·2019-08-30 13:50

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

CSS_JS_Tips

相关文章

CSS_JS_Tips

发表评论

0条评论

张春雷

男|高级讲师

TA的文章

鲸鱼数据：江西NAT VPS,1核/512MB内存/5GB SSD空间/1TB流量/100Mbps端

开源早读课周刊（第 9 期）：腾讯的开源稳步推进

如何评主机地址-电脑主机名或IP地址怎么查？

Linux驱动开发：汇编LED灯实验（I.MX6UL芯片）

Web前端开发过程踩过的坑以及一些小方法技巧（持续更新）

记录

CSS实现8种炫酷按钮

微信小程序教学第四章第一节（含视频）：小程序中级实战教程：详情-页面制作

最新活动