CSS_JS_Tips

liukai90 發(fā)布于2019-08-01 17:08 / 1604人閱讀

摘要：所以，無形之后，會(huì)增加一個(gè)頂層命名空間。導(dǎo)入一個(gè)空模塊，是一個(gè)空對(duì)象一個(gè)模塊就是一個(gè)對(duì)象。

工作中遇見的CSS問題或JS技巧

rem 計(jì)算

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;
}

移動(dòng)端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局部使用彈性滾動(dòng)效果

iOS自帶的全局滾動(dòng)中有自帶的彈性滾動(dòng)，而局部滾動(dòng)沒有。
iOS啟動(dòng)局部滾動(dòng)使用彈性滾動(dòng)效果

body {
    -webkit-overflow-scrolling: touch;
}

/* 局部滾動(dòng)的dom節(jié)點(diǎn) */
.scroll-el {
    overflow: auto;
}

將屬性掛在body上，可以避免很多奇怪的bug

出界

什么情況下會(huì)觸發(fā)出界？

全局滾動(dòng)
滾動(dòng)到頁(yè)面頂部（或底部）時(shí)繼續(xù)向下（向上）滑動(dòng)，就會(huì)出現(xiàn)

局部滾動(dòng)
滾動(dòng)到頁(yè)面頂部（或底部）時(shí)，手指離開停下，再繼續(xù)向下（向上）滑動(dòng)，就會(huì)出現(xiàn)

iOS解決方案：

局部滾動(dòng)：使用ScrollFix組件

核心代碼：

if (startTopScroll <= 0) {
    elem.scrollTop = 1
}
if (startTopScroll + elem.offsetHeight >= elem.scrollheight) {
    elem.scrollTop = elem.scrollheight - elem.offsetHeight - 1 
}

注意：頁(yè)面的固定區(qū)域禁止touchmove默認(rèn)事件

android使用局部undong，會(huì)導(dǎo)致滾動(dòng)條顯示異常，且滾動(dòng)不流暢。

Android下建議只使用全局滾動(dòng)

頁(yè)面流暢滾動(dòng)的方法

body上加上-webkit-overflow-scorlling: touch

iOS盡量使用局部滾動(dòng)

iOS引進(jìn)ScrollFix避免出界

Android下盡量使用全局滾動(dòng)
盡量不用overflow: auto
使用min-height: 100%代替height: 100%

iOS下帶有滾動(dòng)條且position: absolute的節(jié)點(diǎn)不要設(shè)置背景色

input喚起純數(shù)字軟鍵盤

通過input的type屬性來喚起純數(shù)字軟鍵盤

其它pattern屬性值并不支持

關(guān)閉首字母大寫

定制軟鍵盤的行為：
配置input節(jié)點(diǎn)的autocapitalize,autocorrect屬性

輸入英文用戶名首字母自動(dòng)大寫

// 關(guān)閉首字母大寫
autocapitalize="off"

autocorrect屬性值的效果：

重復(fù)特殊字符

new Array(num).join("*") // 重復(fù)num個(gè)*

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結(jié)構(gòu)

┌─────────────────────────────────────────────────────────────────────────────────────────────┐
│                                            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庫(kù)解決

import FastClick from "fastclick"

if ("addEventListener" in document) {
  document.addEventListener(
    "DOMContentLoaded",
    () => {
      (FastClick as any).attach(document.body)
    },
    false,
  )
}

導(dǎo)入和導(dǎo)出

Node方式導(dǎo)入對(duì)應(yīng)導(dǎo)出

一個(gè)JavaScript文件，可以向外exprots無數(shù)個(gè)變量，函數(shù)，對(duì)象，但是require(); 的時(shí)候，僅僅需要載入一次JS文件即可。所以，無形之后，會(huì)增加一個(gè)頂層命名空間。

導(dǎo)入一個(gè)空模塊，是一個(gè)空對(duì)象,一個(gè)模塊就是一個(gè)對(duì)象。

導(dǎo)出方式：

exports, 導(dǎo)出整個(gè)式子

module.exports, 導(dǎo)出賦值部分

導(dǎo)入方式：

reuire()

// 導(dǎo)出一個(gè)變量
exports.a = 10;

// 導(dǎo)入該變量
let b = require("./export")

// 導(dǎo)入的形式 `console.log(b)`輸出導(dǎo)入的值：
// { a: 10 }

// 導(dǎo)出一個(gè)變量，直接需要變量值使用.
// module.exports = "name";

// 導(dǎo)入該變量
let b = require("./export")

// 導(dǎo)入的形式 `console.log(b)`輸出導(dǎo)入的值：
// name

// 導(dǎo)出對(duì)象
module.exports = {
  name1: 123,
  name2: 456
}

// 導(dǎo)入該變量
let b = require("./export")

// 導(dǎo)入的形式 `console.log(b)`輸出導(dǎo)入的值：
// { name1: 123, name2: 456 }

// 導(dǎo)出對(duì)象
exports.msg = {
  name1: 1,
  name2: 2
}

// 導(dǎo)入該變量
let b = require("./export")

// 導(dǎo)入的形式 `console.log(b)`輸出導(dǎo)入的值：
// { msg: { name1: 1, name2: 2 } }

// 導(dǎo)出函數(shù)
exports.showMsg = function () {
}

// 導(dǎo)入該變量
// let b = require("./export")

// 導(dǎo)入的形式 `console.log(b)`輸出導(dǎo)入的值：
// { showMsg: [Function] }

// 在 引用結(jié)果 需要  通過  變量 引用對(duì)象 執(zhí)行
// var b= require();
// b.showMsg();

// 導(dǎo)出函數(shù)
module.exports = function () {
}

// 導(dǎo)入該變量
let b = require("./export")

// 導(dǎo)入的形式 `console.log(b)`輸出導(dǎo)入的值：
// [Function]

// 引入文件的 變量  直接執(zhí)行

對(duì)象,函數(shù)常使用的導(dǎo)出方式：module.exports

ES6和Typescript方式導(dǎo)入對(duì)應(yīng)導(dǎo)出

導(dǎo)出：export
導(dǎo)入：import

注意點(diǎn):

導(dǎo)出和導(dǎo)入，除了使用as之外，變量名相同

導(dǎo)出一個(gè)文件，默認(rèn)是一個(gè)空對(duì)象

直接使用導(dǎo)入文件定義變量名，直接執(zhí)行

default導(dǎo)出，在導(dǎo)入的時(shí)候可以取任意變量名

export default默認(rèn)導(dǎo)出模塊不能使用{}對(duì)象導(dǎo)出

// 導(dǎo)出一個(gè)常量
export const foo = Math.sqrt(2)

// 導(dǎo)入
import { foo } from "./export"

function myFunction () {}
// 導(dǎo)出已經(jīng)聲明的函數(shù)
export { myFunction }

導(dǎo)入
import { myFunction } from "./export"

// 多個(gè)導(dǎo)出
export function cube(x: number): number {
    return x * x * x
}
const foo: number = Math.PI * Math.sqrt(2)
export { foo } // 導(dǎo)出多個(gè)

// 導(dǎo)入
import { cube, foo } from "./export"

// 導(dǎo)出函數(shù)
export default function () {}
export default function fun () {}

// 導(dǎo)入
import myFunction from "./export" // 可以取任意變量名
// 如果導(dǎo)出默認(rèn)，定義函數(shù)名或者變量名，或者類名
// 導(dǎo)入的時(shí)候可以寫和原來相同名字，也可以取任意變量名

// 導(dǎo)出類
export default class {}

// 導(dǎo)入
import Test from "./export"

一個(gè)文件（模塊）默認(rèn)的導(dǎo)出只能有一個(gè)，可以是類，函數(shù)，對(duì)象等

導(dǎo)入整個(gè)模塊的內(nèi)容，在當(dāng)前作用域插入export變量，包含export文件中全部導(dǎo)出綁定(包括export default):

// 導(dǎo)出多個(gè)模塊
export function query () {}
export function update () {}

// 導(dǎo)入
import * as API from "./export"

將整個(gè)模塊作為附加功能導(dǎo)入，但是不導(dǎo)入模塊的導(dǎo)出成員:

import "my-module"

GPU云服務(wù)器云服務(wù)器 CSS_JS_Tips

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50973.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

liukai90

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2183·2023-04-25 15:00
unixserv.eu，荷蘭VPS，1歐/月，1核/512M內(nèi)存/10G NVMe/不限流量/10G

閱讀 2361·2021-11-18 13:14
【嵌入式】利用FinSH控制臺(tái)控制LED燈

閱讀 1188·2021-11-15 11:37
華中科技大學(xué)與UCloud優(yōu)刻得達(dá)成戰(zhàn)略合作

閱讀 3097·2021-09-24 13:55
CSS篇－line-height計(jì)算方法（父子元素）

閱讀 1234·2019-08-30 15:52
360°產(chǎn)品展示

閱讀 2656·2019-08-29 12:35
正在暑假中的《課多周刊》(第1期)

閱讀 3371·2019-08-29 11:04
一個(gè)基于Node.js的本地快速測(cè)試服務(wù)器

閱讀 1219·2019-08-26 12:13

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

CSS_JS_Tips

相關(guān)文章

CSS_JS_Tips

發(fā)表評(píng)論

0條評(píng)論

liukai90

男|高級(jí)講師

TA的文章

tensorflow

unixserv.eu，荷蘭VPS，1歐/月，1核/512M內(nèi)存/10G NVMe/不限流量/10G

【嵌入式】利用FinSH控制臺(tái)控制LED燈

華中科技大學(xué)與UCloud優(yōu)刻得達(dá)成戰(zhàn)略合作

CSS篇－line-height計(jì)算方法（父子元素）

360°產(chǎn)品展示

正在暑假中的《課多周刊》(第1期)

一個(gè)基于Node.js的本地快速測(cè)試服務(wù)器

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

CSS_JS_Tips

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！