CSS_JS_Tips

張春雷發(fā)布于2019-08-29 12:56 / 1196人閱讀

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

工作中遇見的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節(jié)點 */
.scroll-el {
    overflow: auto;
}

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

出界

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

全局滾動
滾動到頁面頂部（或底部）時繼續(xù)向下（向上）滑動，就會出現(xiàn)

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

iOS解決方案：

局部滾動：使用ScrollFix組件

核心代碼：

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

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

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

Android下建議只使用全局滾動

頁面流暢滾動的方法

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

iOS盡量使用局部滾動

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

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

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

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

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

其它pattern屬性值并不支持

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

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

輸入英文用戶名首字母自動大寫

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

autocorrect屬性值的效果：

重復(fù)特殊字符

new Array(num).join("*") // 重復(fù)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結(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庫解決

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)入對應(yīng)導(dǎo)出

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

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

導(dǎo)出方式：

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

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

導(dǎo)入方式：

reuire()

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

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

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

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

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

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

// 導(dǎo)出對象
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)出對象
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é)果 需要  通過  變量 引用對象 執(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í)行

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

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

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

注意點:

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

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

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

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

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

// 導(dǎo)出一個常量
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"

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

// 導(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)入的時候可以寫和原來相同名字，也可以取任意變量名

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

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

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

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

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

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

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

import "my-module"

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112254.html

發(fā)表評論

登陸后可評論

0條評論

張春雷

男|高級講師

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

TA的文章

鯨魚數(shù)據(jù)：江西NAT VPS,1核/512MB內(nèi)存/5GB SSD空間/1TB流量/100Mbps端

閱讀 1704·2021-09-23 11:31
開源早讀課周刊（第 9 期）：騰訊的開源穩(wěn)步推進(jìn)

閱讀 1011·2021-09-23 11:22
如何評主機(jī)地址-電腦主機(jī)名或IP地址怎么查？

閱讀 1451·2021-09-22 15:41
Linux驅(qū)動開發(fā)：匯編LED燈實驗（I.MX6UL芯片）

閱讀 4180·2021-09-03 10:28
Web前端開發(fā)過程踩過的坑以及一些小方法技巧（持續(xù)更新）

閱讀 2977·2019-08-30 15:55
記錄

閱讀 3603·2019-08-30 15:55
CSS實現(xiàn)8種炫酷按鈕

閱讀 2055·2019-08-30 15:44
微信小程序教學(xué)第四章第一節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-頁面制作

閱讀 2781·2019-08-30 13:50

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

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

CSS_JS_Tips

相關(guān)文章

CSS_JS_Tips

發(fā)表評論

0條評論

張春雷

男|高級講師

TA的文章

鯨魚數(shù)據(jù)：江西NAT VPS,1核/512MB內(nèi)存/5GB SSD空間/1TB流量/100Mbps端

開源早讀課周刊（第 9 期）：騰訊的開源穩(wěn)步推進(jìn)

如何評主機(jī)地址-電腦主機(jī)名或IP地址怎么查？

Linux驅(qū)動開發(fā)：匯編LED燈實驗（I.MX6UL芯片）

Web前端開發(fā)過程踩過的坑以及一些小方法技巧（持續(xù)更新）

記錄

CSS實現(xiàn)8種炫酷按鈕

微信小程序教學(xué)第四章第一節(jié)（含視頻）：小程序中級實戰(zhàn)教程：詳情-頁面制作

最新活動

資訊專欄INFORMATION COLUMN

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

CSS_JS_Tips

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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