国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

移動(dòng)端開發(fā)單位——rem，動(dòng)態(tài)使用

CastlePeaK / 594人閱讀

摘要：移動(dòng)端開發(fā)大綱一移動(dòng)開發(fā)和適配特點(diǎn)跑在手機(jī)端的頁面頁面跨平臺(tái)基于告別擁抱更高的適配和性能要求小技巧在調(diào)試窗口中，選中就會(huì)顯示標(biāo)簽元素的全部樣式。

移動(dòng)端開發(fā)-大綱 一、移動(dòng)web開發(fā)和適配 1、特點(diǎn)： 
跑在手機(jī)端的web頁面（H5頁面）、 跨平臺(tái)、基于webview、告別IE擁抱webkit、更高的適配和性能要求

小技巧：在調(diào)試窗口中，選中“computed -> Show all”,就會(huì)顯示標(biāo)簽元素的全部樣式。

2、常見的移動(dòng)web適配方法：

定高，寬度百分比

flex布局 <響應(yīng)式布局>

Media Query(媒體查詢) <響應(yīng)式布局>

(1)、Media Query（媒體查詢）

    
    @media 媒體類型 and (媒體特性){
        /*css樣式*/
    }   

    //媒體類型：screen , print....
    //媒體特性：max-width , max-height....

（2）、js配置跟頁面字體大小

//在index.html中配置根元素字體大小
二、移動(dòng)端實(shí)戰(zhàn) 1、通過sass語法中function函數(shù)自動(dòng)將px轉(zhuǎn)為rem 
//a.scss文件
//以iPhone6屏幕尺寸為例，轉(zhuǎn)化得到的1rem = 37.5px;
@function rem2px($px) {
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}
.a {
  font-size: rem2px(37.5px);
}

//轉(zhuǎn)化為a.css文件如下：
.a {
  font-size: 1rem; 
  }
前提：安裝node-sass來編譯scss文件為css文件。
2、實(shí)戰(zhàn)DEMO【移動(dòng)端使用此方法即可】

（1）、生成項(xiàng)目

    npm init
項(xiàng)目結(jié)構(gòu)：

（2）、根據(jù)package.json文件，安裝如下包：

（3）、根目錄下增加webpack.conf.js文件：

var webpack = require("webpack");
var path = require("path");
module.exports = {
  entry: "./app.js",
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /.(png|jpg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 1024
            }
          }
        ]
      }
    ]
  }
};

（4）、根目錄下增加app.js

require("./index.scss");
//動(dòng)態(tài)配置根元素的font-size數(shù)值
let htmlWidth =
  document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName("html")[0];
htmlDom.style.fontSize = htmlWidth / 10 + "px";
console.log(htmlDom.style.fontSize);

（5）、index.scss文件中修改樣式

//使用sass的function函數(shù)自動(dòng)轉(zhuǎn)換px為rem
//`這里以iPhone6的UI尺寸配置`
@function px2rem($px) {
  $rem: 37.5px;
  @return ($px / $rem) + rem;
}

.header {
  //根據(jù)UI圖將標(biāo)識(shí)高度值直接傳入?yún)?shù)即可
  height: px2rem(40px);   
  }
    
注意：一般設(shè)計(jì)師給我們的UI圖中的標(biāo)識(shí)高度是放大一倍的值，所以需要使用 “ height: px2rem(80px/2)”，將高度值除以2在傳入?yún)?shù)中。

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

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

相關(guān)文章

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來到今天剛剛開放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂見的，這次的快應(yīng)用的手機(jī)廠...

    import. 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來到今天剛剛開放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂見的，這次的快應(yīng)用的手機(jī)廠...

    snowLu 評(píng)論0 收藏0

  • 我對(duì)移動(dòng)端適配的了解

    摘要：隨著移動(dòng)端的發(fā)展，在手機(jī)上看電腦端的頁面已成為非常普及現(xiàn)象。方案一固定高度，使其寬度自適應(yīng)這也是我接觸移動(dòng)端適配第一次使用的方案。 不知不覺做前端已經(jīng)兩年了，從PC端，移動(dòng)端，微信小程序一路走來到今天剛剛開放注冊(cè)的快應(yīng)用(手機(jī)廠商對(duì)抗小程序的新技能,所以在注冊(cè)時(shí)用的是qq郵箱的話要去垃圾箱里才能找到注冊(cè)郵件)，對(duì)于前端圈日新月異的磅礴發(fā)展對(duì)于大前端發(fā)展是喜聞樂見的，這次的快應(yīng)用的手機(jī)廠...

    XGBCCC 評(píng)論0 收藏0

  • 移動(dòng)端響應(yīng)式

    摘要：一些基礎(chǔ)請(qǐng)看這篇的一篇真正教會(huì)你開發(fā)移動(dòng)端頁面的文章二這段代碼是讓布局視口的尺寸等于理想視口。響應(yīng)式工作大，維護(hù)性難縮放天貓，使用布局，字體單位用淘寶，使用庫，是他們自己的一個(gè)庫，思想就是根據(jù)去動(dòng)態(tài)設(shè)置，元素寬高都用。 0.一些基礎(chǔ) 請(qǐng)看這篇：HcySunYang的blog：一篇真正教會(huì)你開發(fā)移動(dòng)端頁面的文章(二)width=device-width 這段代碼是讓布局視口的尺寸等于理想...

    huayeluoliuhen 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<