欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

出來混，那些混過去的，遲早是要還的 (￣Д ￣)┍ 。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供和平企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為和平眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

讓我們來解決幾個(gè)問題：

1. 什么是 viewport ? 它的的作用是啥？

提到 viewport，之前總感覺挺突兀的，但是當(dāng)我最近做移動(dòng)端項(xiàng)目時(shí)，突然關(guān)注到一直被忽略的 meta 標(biāo)簽的時(shí)候，才恍然大悟（o(╯□╰)o）。那么，首先讓我們來了解一下 meta 標(biāo)簽?一直被忽略的meta標(biāo)簽了解一下，之后再去看 viewport，就很容易記住了，不就是 meta 標(biāo)簽中 name 屬性的一個(gè)值嘛。

那么， 它的作用是啥呢？要了解它具體的作用，我們需要先來了解一些相關(guān)的基本知識(shí)。

視口類型

viewport 指瀏覽器的窗口，即瀏覽器上用來顯示網(wǎng)頁的那部分區(qū)域，是用戶網(wǎng)頁的可視區(qū)域。

viewport 的功能在于控制你網(wǎng)站的最高塊狀（block）容器：<html>元素。可以理解為 viewport 是容納 <html> 元素的元素。<html> 元素的寬度為瀏覽器的寬度，即為 viewport 寬度的100%。（原文）

在移動(dòng)端和pc端，視口是不同的。pc端的視口是瀏覽器窗口區(qū)域，而在移動(dòng)端則有三個(gè)不同的視口概念：布局視口、視覺視口、理想視口。

  • layout viewport（布局視口）：網(wǎng)頁布局的基準(zhǔn)窗口，在PC瀏覽器上，相當(dāng)于當(dāng)前瀏覽器的窗口大小（不包括borders 、margins、滾動(dòng)條）。在移動(dòng)端，布局視口被賦予一個(gè)默認(rèn)值，大部分為980px，這保證PC的網(wǎng)頁可以在手機(jī)瀏覽器上呈現(xiàn)，但是非常小，用戶可以手動(dòng)對網(wǎng)頁進(jìn)行放大。 可以通過 document.documentElement.clientWidth/clientHeight 獲取網(wǎng)頁在標(biāo)準(zhǔn)模式下的布局視口大小。

  • visual viewport（視覺視口）：用戶在移動(dòng)設(shè)備屏幕上能看到的那部分區(qū)域。 可以通過 window.innerWidth / innerHeight 來獲取視覺視口大小。

  • ideal viewport（理想視口）：網(wǎng)站頁面在移動(dòng)端展示的理想大小。使頁面的寬度跟設(shè)備寬度一致（布局視口=理想視口 = 視覺視口），我們就能在移動(dòng)屏幕上看到正常舒服的頁面。 可以通過調(diào)用 screen.width / height 來獲取理想視口大小。

（ viewport移動(dòng)端適配、關(guān)于移動(dòng)端適配，你必須要知道的）

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

viewport 的設(shè)置不會(huì)對 PC 頁面產(chǎn)生影響，但對于移動(dòng)頁面卻很重要。

屬性介紹

屬性 含義 取值 width 定義視口的寬度，單位為像素 正整數(shù)或設(shè)備寬度device-width height 定義視口的高度，單位為像素 正整數(shù)或device-height initial-scale 定義初始縮放值 整數(shù)或小數(shù) minimum-scale 定義縮小最小比例，它必須小于或等于maximum-scale設(shè)置 整數(shù)或小數(shù) maximum-scale 定義放大最大比例，它必須大于或等于minimum-scale設(shè)置 整數(shù)或小數(shù) user-scalable 定義是否允許用戶手動(dòng)縮放頁面，默認(rèn)值yes yes/no 基本用法和作用

<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=no">復(fù)制代碼

上面這個(gè)基本的設(shè)置：

  • width=device-width：表示讓 布局視口 的寬度等于設(shè)備寬度；

  • initial-scale=1：表示頁面的初始縮放比例為1，相當(dāng)于讓 視覺視口 等于 理想視口；

  • maximum-scale=1.0 表示頁面的最大縮放比為1；

  • user-scalable=no 表示不允許用戶對頁面進(jìn)行縮放操作。

viewport 屬性的作用，就是讓 布局視口 通過縮放來適配屏幕寬度，width=device.width 僅僅是讓 布局視口 初始大小等于設(shè)備寬度，后面設(shè)置的initial-scale 是用來縮放 布局視口 大小，而且默認(rèn)是 布局視口 初始大小等于設(shè)備寬度，也就是所謂的 理想視口。

2. 什么是 rem？它的布局原理是什么？

rem（font size of the root element）：是指相對于根元素的字體大小的單位，其布局的本質(zhì)是等比縮放，一般是基于寬度。

將設(shè)計(jì)稿轉(zhuǎn)化為手機(jī)屏幕上的內(nèi)容，就類似于畫地圖，按照一定的比例進(jìn)行縮小繪制：

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

3. 為什么要進(jìn)行 scale 縮放？scale 與 dpr 的關(guān)系？

dpr ( device pixel ratio)：設(shè)備像素比，即設(shè)備物理像素與邏輯像素(css像素)的比例。

window.devicePixelRatio復(fù)制代碼

  • web前端領(lǐng)域，像素分為 設(shè)備像素 和 CSS像素；

  • 一個(gè) CSS像素 的大小是可變的，比如用戶縮放頁面的時(shí)候，實(shí)際上就是在縮小或放大 CSS像素，而 設(shè)備像素 無論大小還是數(shù)量都是不變的。

【設(shè)計(jì)稿】：設(shè)計(jì)師給的 750px 寬的設(shè)計(jì)稿是根據(jù)設(shè)備像素（device pixel，物理像素）為單位制作的設(shè)計(jì)稿。

【web頁面編寫】：前端工程師在編碼 web 頁面時(shí)所寫的 CSS 像素 則需要根據(jù) 設(shè)備像素比 來進(jìn)行換算。

設(shè)備像素比(DPR) = 設(shè)備像素個(gè)數(shù) / 理想視口CSS像素個(gè)數(shù)(device-width) ，則：

CSS像素 = 設(shè)計(jì)稿像素/dpr。

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

縮放會(huì)影響 布局視口 的大小，當(dāng)我們在移動(dòng)端對頁面進(jìn)行放大和縮小時(shí)，實(shí)際上是在改變 CSS 像素的大小，而?scale 縮放的目的就是為了使 CSS 像素適應(yīng)移動(dòng)端的設(shè)備像素，而這個(gè)縮放是通過兩個(gè)關(guān)鍵的元素設(shè)置來實(shí)現(xiàn)的：

width=device-width,initial-scale=1/dpr

做的事情就是先把布局視口放大dpr倍，然后再整體縮放相應(yīng)倍數(shù)以適應(yīng)設(shè)備尺寸，這樣就能夠使css像素和設(shè)備物理像素一對一了。

var?isAndroid?=?win.navigator.appVersion.match(/android/gi);var?isIPhone?=?win.navigator.appVersion.match(/iphone/gi);var?devicePixelRatio?=?win.devicePixelRatio;if?(isIPhone)?{?//?iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
?if?(devicePixelRatio?>=?3?&&?(!dpr?||?dpr?>=?3))?{?
?dpr?=?3;
?}?else?if?(devicePixelRatio?>=?2?&&?(!dpr?||?dpr?>=?2)){
?dpr?=?2;
?}?else?{
?dpr?=?1;
?}
}?else?{?//?其他設(shè)備下，仍舊使用1倍的方案
?dpr?=?1;
}
scale?=?1?/?dpr;
復(fù)制代碼

rem 是為了解決不同機(jī)型不同寬度的問題，scale是為了解決dpr的問題。移動(dòng)端自適應(yīng)與dpr是無關(guān)的。

淘寶方案中采用了dpr用于解決1px的問題，而網(wǎng)易方案并沒有引入dpr，布局視口沒有放大，整個(gè)頁面也沒有縮放，但是并不影響與設(shè)計(jì)圖的比例。

? 真的，移動(dòng)端尺寸自適應(yīng)與dpr無關(guān)

? 詳解適配相關(guān)概念

明白了上述幾個(gè)問題了之后，我們就掌握了移動(dòng)端自適應(yīng)的精髓，從而可以進(jìn)行實(shí)戰(zhàn)開發(fā)了。

拿到設(shè)計(jì)稿，該怎么下手？

通過上面的 rem 換算，我們能夠知道，如何把視覺稿（750px）中元素的 px 轉(zhuǎn)換成 rem。

（1）設(shè)置 html font-size，如將手機(jī)屏幕分成10份：

<script>
?var?dpr?=?window.devicePixelRatio;?var?meta?=?document.createElement('meta');?//?dpr
?meta.setAttribute('content',?'initial-scale='?+?1?/?dpr?+?',?maximum-scale='?+?1?/?dpr?+?',?minimum-scale='?+?1?/?dpr?+?',?user-scalable=no');?document.getElementsByTagName('head')[0].appendChild(meta);?//?rem
?document.addEventListener('DOMContentLoaded',?function?(e)?{?document.getElementsByTagName('html')[0].style.fontSize?=?window.innerWidth?/?10?+?'px';
?},?false);</script>復(fù)制代碼

（2）假設(shè)元素寬度為 300px，則元素寬度：

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

可以通過以下的方案來實(shí)現(xiàn)自動(dòng)轉(zhuǎn)換：

? Scss 方案

$ue-width:?750;?/*?ue圖的寬度?*/@function?px2rem($px)?{
?@return?#{$px/$ue-width*10}rem;
}p?{?width:?px2rem(100);
}
復(fù)制代碼

? vscode 中進(jìn)行 px 到 rem 的轉(zhuǎn)換：vscode-c***em

? postcss-pxtorem 方案

//?postcss.config.jsconst?pxtorem?=?require('postcss-pxtorem');const?pxtoremOpts?=?{
?rootValue:?16,?//?根字體大小，默認(rèn)16
?unitPrecision:?5,?//?精度
?propList:?['font',?'font-size',?'line-height',?'letter-spacing'],?//?可以將px轉(zhuǎn)換成rem的屬性
?selectorBlackList:?[],?//?選擇器忽略并保留px
?replace:?true,?//?替換包含rems的規(guī)則
?mediaQuery:?false,?//?是否允許在媒體查詢中轉(zhuǎn)換px
?minPixelValue:?2?//?設(shè)置要替換的最小像素值};module.exports?=?{
?plugins:?[
?pxtorem(pxtoremOpts),
?],
};
復(fù)制代碼

5. 常見移動(dòng)端分辨率

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

出來混，那些混過去的，遲早是要還的 (￣Д ￣)┍ 。

讓我們來解決幾個(gè)問題：

1. 什么是 viewport ? 它的的作用是啥？

提到 viewport，之前總感覺挺突兀的，但是當(dāng)我最近做移動(dòng)端項(xiàng)目時(shí)，突然關(guān)注到一直被忽略的 meta 標(biāo)簽的時(shí)候，才恍然大悟（o(╯□╰)o）。那么，首先讓我們來了解一下 meta 標(biāo)簽?一直被忽略的meta標(biāo)簽了解一下，之后再去看 viewport，就很容易記住了，不就是 meta 標(biāo)簽中 name 屬性的一個(gè)值嘛。

那么， 它的作用是啥呢？要了解它具體的作用，我們需要先來了解一些相關(guān)的基本知識(shí)。

視口類型

viewport 指瀏覽器的窗口，即瀏覽器上用來顯示網(wǎng)頁的那部分區(qū)域，是用戶網(wǎng)頁的可視區(qū)域。

viewport 的功能在于控制你網(wǎng)站的最高塊狀（block）容器：<html>元素。可以理解為 viewport 是容納 <html> 元素的元素。<html> 元素的寬度為瀏覽器的寬度，即為 viewport 寬度的100%。（原文）

在移動(dòng)端和pc端，視口是不同的。pc端的視口是瀏覽器窗口區(qū)域，而在移動(dòng)端則有三個(gè)不同的視口概念：布局視口、視覺視口、理想視口。

  • layout viewport（布局視口）：網(wǎng)頁布局的基準(zhǔn)窗口，在PC瀏覽器上，相當(dāng)于當(dāng)前瀏覽器的窗口大小（不包括borders 、margins、滾動(dòng)條）。在移動(dòng)端，布局視口被賦予一個(gè)默認(rèn)值，大部分為980px，這保證PC的網(wǎng)頁可以在手機(jī)瀏覽器上呈現(xiàn)，但是非常小，用戶可以手動(dòng)對網(wǎng)頁進(jìn)行放大。 可以通過 document.documentElement.clientWidth/clientHeight 獲取網(wǎng)頁在標(biāo)準(zhǔn)模式下的布局視口大小。

  • visual viewport（視覺視口）：用戶在移動(dòng)設(shè)備屏幕上能看到的那部分區(qū)域。 可以通過 window.innerWidth / innerHeight 來獲取視覺視口大小。

  • ideal viewport（理想視口）：網(wǎng)站頁面在移動(dòng)端展示的理想大小。使頁面的寬度跟設(shè)備寬度一致（布局視口=理想視口 = 視覺視口），我們就能在移動(dòng)屏幕上看到正常舒服的頁面。 可以通過調(diào)用 screen.width / height 來獲取理想視口大小。

（ viewport移動(dòng)端適配、關(guān)于移動(dòng)端適配，你必須要知道的）

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

viewport 的設(shè)置不會(huì)對 PC 頁面產(chǎn)生影響，但對于移動(dòng)頁面卻很重要。

屬性介紹

屬性 含義 取值 width 定義視口的寬度，單位為像素 正整數(shù)或設(shè)備寬度device-width height 定義視口的高度，單位為像素 正整數(shù)或device-height initial-scale 定義初始縮放值 整數(shù)或小數(shù) minimum-scale 定義縮小最小比例，它必須小于或等于maximum-scale設(shè)置 整數(shù)或小數(shù) maximum-scale 定義放大最大比例，它必須大于或等于minimum-scale設(shè)置 整數(shù)或小數(shù) user-scalable 定義是否允許用戶手動(dòng)縮放頁面，默認(rèn)值yes yes/no 基本用法和作用

<meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?maximum-scale=1.0,?user-scalable=no">復(fù)制代碼

上面這個(gè)基本的設(shè)置：

  • width=device-width：表示讓 布局視口 的寬度等于設(shè)備寬度；

  • initial-scale=1：表示頁面的初始縮放比例為1，相當(dāng)于讓 視覺視口 等于 理想視口；

  • maximum-scale=1.0 表示頁面的最大縮放比為1；

  • user-scalable=no 表示不允許用戶對頁面進(jìn)行縮放操作。

viewport 屬性的作用，就是讓 布局視口 通過縮放來適配屏幕寬度，width=device.width 僅僅是讓 布局視口 初始大小等于設(shè)備寬度，后面設(shè)置的initial-scale 是用來縮放 布局視口 大小，而且默認(rèn)是 布局視口 初始大小等于設(shè)備寬度，也就是所謂的 理想視口。

2. 什么是 rem？它的布局原理是什么？

rem（font size of the root element）：是指相對于根元素的字體大小的單位，其布局的本質(zhì)是等比縮放，一般是基于寬度。

將設(shè)計(jì)稿轉(zhuǎn)化為手機(jī)屏幕上的內(nèi)容，就類似于畫地圖，按照一定的比例進(jìn)行縮小繪制：

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

3. 為什么要進(jìn)行 scale 縮放？scale 與 dpr 的關(guān)系？

dpr ( device pixel ratio)：設(shè)備像素比，即設(shè)備物理像素與邏輯像素(css像素)的比例。

window.devicePixelRatio復(fù)制代碼

  • web前端領(lǐng)域，像素分為 設(shè)備像素 和 CSS像素；

  • 一個(gè) CSS像素 的大小是可變的，比如用戶縮放頁面的時(shí)候，實(shí)際上就是在縮小或放大 CSS像素，而 設(shè)備像素 無論大小還是數(shù)量都是不變的。

【設(shè)計(jì)稿】：設(shè)計(jì)師給的 750px 寬的設(shè)計(jì)稿是根據(jù)設(shè)備像素（device pixel，物理像素）為單位制作的設(shè)計(jì)稿。

【web頁面編寫】：前端工程師在編碼 web 頁面時(shí)所寫的 CSS 像素 則需要根據(jù) 設(shè)備像素比 來進(jìn)行換算。

設(shè)備像素比(DPR) = 設(shè)備像素個(gè)數(shù) / 理想視口CSS像素個(gè)數(shù)(device-width) ，則：

CSS像素 = 設(shè)計(jì)稿像素/dpr。

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

縮放會(huì)影響 布局視口 的大小，當(dāng)我們在移動(dòng)端對頁面進(jìn)行放大和縮小時(shí)，實(shí)際上是在改變 CSS 像素的大小，而?scale 縮放的目的就是為了使 CSS 像素適應(yīng)移動(dòng)端的設(shè)備像素，而這個(gè)縮放是通過兩個(gè)關(guān)鍵的元素設(shè)置來實(shí)現(xiàn)的：

width=device-width,initial-scale=1/dpr

做的事情就是先把布局視口放大dpr倍，然后再整體縮放相應(yīng)倍數(shù)以適應(yīng)設(shè)備尺寸，這樣就能夠使css像素和設(shè)備物理像素一對一了。

var?isAndroid?=?win.navigator.appVersion.match(/android/gi);var?isIPhone?=?win.navigator.appVersion.match(/iphone/gi);var?devicePixelRatio?=?win.devicePixelRatio;if?(isIPhone)?{?//?iOS下，對于2和3的屏，用2倍的方案，其余的用1倍方案
?if?(devicePixelRatio?>=?3?&&?(!dpr?||?dpr?>=?3))?{?
?dpr?=?3;
?}?else?if?(devicePixelRatio?>=?2?&&?(!dpr?||?dpr?>=?2)){
?dpr?=?2;
?}?else?{
?dpr?=?1;
?}
}?else?{?//?其他設(shè)備下，仍舊使用1倍的方案
?dpr?=?1;
}
scale?=?1?/?dpr;
復(fù)制代碼

rem 是為了解決不同機(jī)型不同寬度的問題，scale是為了解決dpr的問題。移動(dòng)端自適應(yīng)與dpr是無關(guān)的。

淘寶方案中采用了dpr用于解決1px的問題，而網(wǎng)易方案并沒有引入dpr，布局視口沒有放大，整個(gè)頁面也沒有縮放，但是并不影響與設(shè)計(jì)圖的比例。

? 真的，移動(dòng)端尺寸自適應(yīng)與dpr無關(guān)

? 詳解適配相關(guān)概念

明白了上述幾個(gè)問題了之后，我們就掌握了移動(dòng)端自適應(yīng)的精髓，從而可以進(jìn)行實(shí)戰(zhàn)開發(fā)了。

拿到設(shè)計(jì)稿，該怎么下手？

通過上面的 rem 換算，我們能夠知道，如何把視覺稿（750px）中元素的 px 轉(zhuǎn)換成 rem。

（1）設(shè)置 html font-size，如將手機(jī)屏幕分成10份：

<script>
?var?dpr?=?window.devicePixelRatio;?var?meta?=?document.createElement('meta');?//?dpr
?meta.setAttribute('content',?'initial-scale='?+?1?/?dpr?+?',?maximum-scale='?+?1?/?dpr?+?',?minimum-scale='?+?1?/?dpr?+?',?user-scalable=no');?document.getElementsByTagName('head')[0].appendChild(meta);?//?rem
?document.addEventListener('DOMContentLoaded',?function?(e)?{?document.getElementsByTagName('html')[0].style.fontSize?=?window.innerWidth?/?10?+?'px';
?},?false);</script>復(fù)制代碼

（2）假設(shè)元素寬度為 300px，則元素寬度：

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

可以通過以下的方案來實(shí)現(xiàn)自動(dòng)轉(zhuǎn)換：

? Scss 方案

$ue-width:?750;?/*?ue圖的寬度?*/@function?px2rem($px)?{
?@return?#{$px/$ue-width*10}rem;
}p?{?width:?px2rem(100);
}
復(fù)制代碼

? vscode 中進(jìn)行 px 到 rem 的轉(zhuǎn)換：vscode-c***em

? postcss-pxtorem 方案

//?postcss.config.jsconst?pxtorem?=?require('postcss-pxtorem');const?pxtoremOpts?=?{
?rootValue:?16,?//?根字體大小，默認(rèn)16
?unitPrecision:?5,?//?精度
?propList:?['font',?'font-size',?'line-height',?'letter-spacing'],?//?可以將px轉(zhuǎn)換成rem的屬性
?selectorBlackList:?[],?//?選擇器忽略并保留px
?replace:?true,?//?替換包含rems的規(guī)則
?mediaQuery:?false,?//?是否允許在媒體查詢中轉(zhuǎn)換px
?minPixelValue:?2?//?設(shè)置要替換的最小像素值};module.exports?=?{
?plugins:?[
?pxtorem(pxtoremOpts),
?],
};
復(fù)制代碼

5. 常見移動(dòng)端分辨率

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？

網(wǎng)頁名稱：拿到一份設(shè)計(jì)稿，我該如何進(jìn)行移動(dòng)端開發(fā)？
文章轉(zhuǎn)載：http://chinadenli.net/article8/jigpip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、Google、企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、商城網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)