CSS_JS_Tips

時間 2020-02-07

標籤 css tips 欄目 CSS 简体版

原文原文鏈接

工做中碰見的CSS問題或JS技巧html

rem 計算

rem等比縮放樣式android

方案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啓動局部滾動使用彈性滾動效果git

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

/* 局部滾動的dom節點 */
.scroll-el {
    overflow: auto;
}

將屬性掛在body上，能夠避免不少奇怪的buggithub

出界

什麼狀況下會觸發出界？web

全局滾動
滾動到頁面頂部（或底部）時繼續向下（向上）滑動，就會出現
局部滾動
滾動到頁面頂部（或底部）時，手指離開停下，再繼續向下（向上）滑動，就會出現

iOS解決方案：api

局部滾動：使用ScrollFix組件dom

核心代碼：函數

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

注意：頁面的固定區域禁止touchmove默認事件flex

android使用局部undong，會致使滾動條顯示異常，且滾動不流暢。ui

Android下建議只使用全局滾動

頁面流暢滾動的方法

body上加上-webkit-overflow-scorlling: touch
iOS儘可能使用局部滾動
iOS引進ScrollFix避免出界
Android下儘可能使用全局滾動
儘可能不用overflow: auto
使用min-height: 100%代替height: 100%
iOS下帶有滾動條且position: absolute的節點不要設置背景色

input喚起純數字軟鍵盤

經過input的type屬性來喚起純數字軟鍵盤

<input type="text" pattern="[0-9]*" />

其它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'

顯示所有DOM邊框

[].forEach.call($$("*"), dom => {
    dom.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16);
});

更多相關文章...

相關標籤/搜索

JavaScript

CSS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。