【佈局方式】smart-rem

時間 2019-12-19

標籤佈局方式 smart rem 简体版

原文原文鏈接

還在發愁佈局問題？javascript

再不用smart-rem，可能就out了。這是一個能夠自動計算rem的代碼庫，它適用於全部主流開發環境：css

瀏覽器環境html

vue框架vue

react框架java

angular框架react

nuxt框架npm

next框架瀏覽器

英文版介紹bash

各類環境的用法分列以下：框架

1.script 標籤

第一步:

在html文件中

<script src="./smart-rem.js"></script>
複製代碼

第二步:

在html文件中

<script>
  smartRem(Arguments)
</script>
複製代碼

註釋: 參數是設計稿的寬度。若是設計稿的寬度是750px，那麼smartRem的參數就是750，注意不帶px，寫法以下：

smartRem(750)
複製代碼

第三步:

在css文件中

.class-name {
    width: 1.5rem;
    font-size: 0.5rem;
}
複製代碼

註釋:若是元素的寬度是150px，那麼它的rem值就是1.5rem，計算方式簡單以下：

150 / 100 = 1.5
150px     =>1.5rem
--------------------
50 / 100 = 0.5
50px     => 0.5rem
複製代碼

2.vue 框架

第一步:

npm install smart-rem -S
複製代碼

第二步:

在文件 src/main.js 中

import smartRem from 'smart-rem'
smartRem(Arguments)
複製代碼

註釋: 參數是設計稿的寬度。若是設計稿的寬度是750px，那麼smartRem的參數就是750，注意不帶px，寫法以下：

smartRem(750)
複製代碼

第三步:

在文件 src/*.vue 中

.class-name {
    width: 1.5rem;
    font-size: 0.5rem;
}

複製代碼

註釋:若是元素的寬度是150px，那麼它的rem值就是1.5rem，計算方式簡單以下：

150 / 100 = 1.5
150px     =>1.5rem
--------------------
50 / 100 = 0.5
50px     => 0.5rem

複製代碼

3.react 框架

第一步:

npm install smart-rem -S

複製代碼

第二步:

在文件 src/index.js 中

import smartRem from 'smart-rem'
smartRem(Arguments)

複製代碼

註釋: 參數是設計稿的寬度。若是設計稿的寬度是750px，那麼smartRem的參數就是750，注意不帶px，寫法以下：

smartRem(750)
複製代碼

第三步:

在文件 src/*.css 中

.class-name {
    width: 1.5rem;
    font-size: 0.5rem;
}

複製代碼

註釋:若是元素的寬度是150px，那麼它的rem值就是1.5rem，計算方式簡單以下：

150 / 100 = 1.5
150px     =>1.5rem
--------------------
50 / 100 = 0.5
50px     => 0.5rem

複製代碼

4.angular 框架

第一步:

npm install smart-rem -S

複製代碼

第二步:

在文件 src/main.ts 中

import smartRem from 'smart-rem'
smartRem(Arguments)
複製代碼

Notes:參數是設計稿的寬度。若是設計稿的寬度是750px，那麼smartRem的參數就是750，注意不帶px，寫法以下：

smartRem(750)
複製代碼

第三步:

在文件 src/**/*.styl 中

.class-name {
    width: 1.5rem;
    font-size: 0.5rem;
}

複製代碼

註釋:若是元素的寬度是150px，那麼它的rem值就是1.5rem，計算方式簡單以下：

150 / 100 = 1.5
150px     =>1.5rem
--------------------
50 / 100 = 0.5
50px     => 0.5rem

複製代碼

5.nuxt 框架

第一步:

npm install smart-rem -S
複製代碼

第二步:

在文件 nuxt.config.js中，在head中添加script，操做以下：

head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    // ** 開始添加 ** //
    script: [
      {
        innerHTML: require('smart-rem') + 'smartRem(Arguments)',
        type: 'text/javascript',
        charset: 'utf-8'
      }
    ],
    __dangerouslyDisableSanitizers: ['script']
    // ** 結束添加 **//
  },

複製代碼

註釋:參數是設計稿的寬度。若是設計稿的寬度是750px，那麼smartRem的參數就是750，注意不帶px，寫法以下：

'smartRem(750)'
複製代碼

第三步:

pages/*.vue,

components/*.vue,

layouts/*.vue.

在以上文件中，寫法以下

.class-name {
    width: 1.5rem;
    font-size: 0.5rem;
}

複製代碼

註釋:若是元素的寬度是150px，那麼它的rem值就是1.5rem，計算方式簡單以下：

150 / 100 = 1.5
150px     =>1.5rem
--------------------
50 / 100 = 0.5
50px     => 0.5rem

複製代碼

6.next 框架

第一步:

npm install smart-rem -S
複製代碼

第二步:

建立一個文件 pages/_document.js ，添加以下內容：

// 提醒：_document 只在服務端渲染，不在客戶端渲染，相似onClick的回調函數不能在此添加

// ./pages/_document.js
import Document, { Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <html>
        <Head>
          <style>{`body { margin: 0 } /* custom! */`}</style>
          // ** 開始添加 ** //
          <script dangerouslySetInnerHTML={{__html: require('smart-rem') + 'smartRem(Arguments)'}}></script>
          // ** 結束添加 ** //
        </Head>
        <body className="custom_class">
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

複製代碼

註釋:參數是設計稿的寬度。若是設計稿的寬度是750px，那麼smartRem的參數就是750，注意不帶px，寫法以下：

'smartRem(750)'
複製代碼

第三步:

在文件 pages/*.js 中，書寫以下：

.class-name {
    width: 1.5rem;
    font-size: 0.5rem;
}

複製代碼

註釋:若是元素的寬度是150px，那麼它的rem值就是1.5rem，計算方式簡單以下：

150 / 100 = 1.5
150px     =>1.5rem
--------------------
50 / 100 = 0.5
50px     => 0.5rem

複製代碼

其它：

若是你已經使用過代碼編輯器插件cssrem，你能夠作如下設置：

在VSCode中，把Root Font Size的值設置爲100

在Sublime中，把px_to_rem的值設置爲100

若是你已經使用過開發依賴包postcss-pxtorem，你能夠將rootValue值設爲100

舉起手手點讚的人，注意下，我看到了你的內涵

相關標籤/搜索

每日一句

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