整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
Axure新技能：自適應手機屏幕大小》相信不少人都已經看過，并對設置方法已經很熟悉了，但該教程只能適應iphone6的屏幕尺寸的比例，在iphoneX出來后屏幕比例改變了，舊的方法已經不能適應目前的全面屏手機了，但現在不用擔心了，筆者已經有新的方法可以去適應市面上98%移動設備（包括手機和平板）屏幕的，讓大家在演示原型的時候更加得心應手了。
目錄：
我們把原型的寬度定為：375px（高度不限制，根據需要設置）。
（1）把元件按需求組合并轉為動態面板，并設置為自動調整內容尺寸。
（2）需要在頭部固定的設置固定到瀏覽器，水平靠左、垂直靠上、始終保持頂層。
（3）中間列表滾動部分不需要設置固定到瀏覽器
（4）需要在底部固定的設置固定到瀏覽器，水平靠左、垂直靠下、始終保持頂層。
其它的設置我就不多說了，主要說一下移動設備的設置。
以上是建議尺寸，也可以使用其它的尺寸。
最重要的初始縮放倍數千萬不要填寫，填寫以后默認就以iphone6（設置的）的尺寸訪問，需要你縮放一下才能夠正常全屏顯示，如果沒有設置，則自動以你移動設置大小進行全屏顯示。
發布完以后，放至網上，這個時候我們就可以用移動設備進行訪問了，我們可以看到無論是iphone5的4.3尺寸還是iphonex的5.8尺寸都是正常全屏顯示的。
請不要使用帶工具欄的頁面訪問，這兩個頁面都是帶工具欄的index.html,start.html。可以使用這個網址查看效果：https://zgdyvg.axshare.com/index.html
IOS使用自帶的Safari瀏覽器，Android使用Chrome瀏覽器均可創建快捷方式到桌面，隱藏瀏覽器導航欄。
IOS方法：
Android方法：
點擊桌面生成的圖標就可以訪問了，現在看上去是不是很像APP呢。
原型訪問的方法有很多，大家都可以根據自己的實際情況進行選擇，本文只是提供可以自適應手機屏幕大小的方法，把原型放在手機上更多的時候是為了方便外出演示的時候，給客戶查看一種實際的效果，所以建議使用高保真原型比較妥。
原型只是展示和溝通的一種方式，并非產品經理的全部，請不要本末倒置，產品經理應該更注重在溝通、思維、邏輯、業務上，當然有時間把原型做好做漂亮也是一種技能。
作者：Han ，深圳產品狗一枚，目前在某個不知名電商任職產品經理，歡迎相約交流。
本文由 @Han 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
保證布局內每一級必須設置相對于父級百分比寬度，但設計稿一般都是按照固定寬度設計，內部圖片都是固定大小，拉伸或者縮放時都會導致變形，雖然都夠實現布局寬度上的自適應，但分辨率過高或者過低時都無法達到一個良好的顯示效果，需要設置min-width和max-width來保證頁面最基本的視覺效果
<!DOCTYPE html>
<html>
<head>
<title>Flow Layout Example</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
通過CSS3的媒體查詢，根據不同的屏幕尺寸區間設置不同的樣式效果，和不同尺寸的圖片，來保證頁面圖片顯示不失真，布局元素錯亂。當分辨率過低 元素數量眾多時 可控制子元素的顯示和隱藏，以及其他效果組件的展示，比方橫向tab展示 變更為下拉選擇 vscode
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.my-image {
width: 30%;
margin-bottom: 20px;
background-color: #f2f2f2;
border: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
background-image: url('image-large.jpg');
}
/* 當分辨率在320px到768px之間時，將item元素的背景設置為image-small.jpg */
@media screen and (min-width: 320px) and (max-width: 768px) {
.item {
background-image: url('image-small.jpg');
font-size:12px
}
}
/* 當分辨率大于768px時，將item元素的背景設置為image-large.jpg */
@media screen and (min-width: 769px) {
.item {
background-image: url('image-big.jpg');
font-size:14px
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">hc 1</div>
<div class="item">hc 2</div>
<div class="item">hc 3</div>
</div>
</body>
</html>
柵格布局是一種網格化的頁面布局方式，它由行和列組成，可以使開發者更容易地創建多種不同大小和位置的元素，并通過調整這些元素的行和列來實現響應式設計。柵格布局適用于各種設備尺寸，使得頁面在各種屏幕上都能夠正常顯示。 在柵格布局中，開發者可以定義一個網格容器，然后在容器中定義行和列，用來劃分網格。每個網格可以放置一個或多個元素。通過調整每個元素所占據的行和列，以及它們之間的距離，可以實現各種頁面布局效果。
<template>
<div>
<iv-row :gutter="16">
<iv-col :span="8">
<!-- 左邊 -->
</iv-col>
<iv-col :span="8" :offset="4">
<!-- 中間內容 -->
</iv-col>
<iv-col :span="4">
<!-- 右側內容 -->
</iv-col>
</iv-row>
</div>
</template>
Flex布局也可以用來實現柵格布局，它提供了一些靈活的屬性來定義網格元素的排列和位置。相比于傳統的柵格布局，Flex布局更加靈活，并且在響應式設計上具有更好的適應性。 以下是Flex布局常用的一些屬性
display：定義flex容器，默認值為flex。 flex-direction：定義主軸的方向，包括row、row-reverse、column、column-reverse四個值。 justify-content：定義主軸上網格元素的對齊方式，包括flex-start、flex-end、center、space-between、space-around五個值。 align-items：定義交叉軸上網格元素的對齊方式，包括flex-start、flex-end、center、baseline、stretch五個值。 flex-wrap：定義網格元素是否換行，默認情況下都不換行，可選nowrap、wrap、wrap-reverse三個值。 order：定義網格元素的顯示順序，默認為0，數值越小越靠前。 flex-grow：定義網格元素在剩余空間中所占的比例。 flex-shrink：定義彈性子元素的縮小比例。 flex-basis：定義彈性子元素的基準大小。 flex：是 flex-grow、flex-shrink 和 flex-basis 的簡寫形式。 align-self：定義單個網格元素在交叉軸上的對齊方式。
<div class="container">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
/* flex-grow：1 子元素分配剩余空間* 0 有空間也不放大 2 大一倍/
.item {
flex-grow: 1;
height: 100px;
background-color: gray;
margin: 10px;
text-align: center;
font-size: 30px;
line-height: 100px;
}
.item-1 {
flex-basis: 200px;
}
/* item-2 如何和他倆在一個主軸 始終會比他們大200px*/
.item-2 {
flex-basis: 400px;
}
.item-3 {
flex-basis: 200px;
}
</style>
display：定義為網格容器。 grid-template-areas：指定網格模板中的區域名稱。 -grid-template-columns：指定網格列的大小。 -grid-template-rows：指定網格行的大小。 grid-template：是 grid-template-areas、grid-template-columns 和 grid-template-rows 的簡寫形式。 grid-auto-columns：指定未顯式指定寬度的列的大小。 grid-auto-rows：指定未顯式指定高度的行的大小。 grid-auto-flow：指定如何安排未被顯式布局的項。 grid-column-gap：設置網格行之間的間距。 grid-row-gap：設置網格列之間的間距。 grid-gap：是 grid-row-gap 和 grid-column-gap 的簡寫形式。
grid-area：是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的簡寫形式。 grid-column-start：指定一個項目的列開始位置。 grid-column-end：指定一個項目的列結束位置。 grid-row-start：指定一個項目的行開始位置。 grid-row-end：指定一個項目的行結束位置。 grid-column：是 grid-column-start 和 grid-column-end 的簡寫形式。 grid-row：是 grid-row-start 和 grid-row-end 的簡寫形式。 grid-area：指定項目應該放置在哪個網格區域中。 justify-self：定義單個項目在其列中的對齊方式。 align-self：定義單個項目在其行中的對齊方式。 place-self：是 align-self 和 justify-self 的簡寫形式。
可以將一個元素及其子元素的所有尺寸都放大或縮小。默認的縮放值是1，表示不進行任何縮放。如果將縮放值設置為2，則元素及其子元素的所有尺寸都會變為原來的兩倍；如果將縮放值設置為0.5，則元素及其子元素的所有尺寸都會變為原來的一半。 zoom在兼容性上存在一些問題，目前火狐瀏覽器是不支持，其他瀏覽器支持，存在一定的風險性
實現方式不同：transform: scale() 是通過 CSS3 的 transform 屬性進行縮放，而 zoom 是通過瀏覽器提供的縮放功能實現的。 兼容性不同：transform: scale() 屬性在大部分現代瀏覽器中得到支持，而 zoom 屬性只在 IE 瀏覽器和 Edge 瀏覽器中得到支持。 對布局影響不同：使用 transform: scale() 屬性進行縮放時，元素的尺寸、位置等屬性會改變，但對周圍元素的布局不會產生影響。而使用 zoom 屬性進行縮放時，元素及其周圍的元素都會被縮放，因此可能會影響整個頁面的布局。
rem是CSS3新增的一個相對單位，它是相對于根元素（html元素）的字體大小來計算的。rem的全稱是"root em"，意為"根em"。
使用rem作為長度單位，可以實現頁面的自適應布局。當用戶調整瀏覽器窗口大小或者在移動設備上旋轉屏幕時，頁面中所有元素的大小都會根據當前根字體大小的比例進行縮放，從而適應不同的屏幕尺寸和設備類型。
使用rem作為單位有以下優點：
相對于像素單位（px）更具有可擴展性，可以適應各種不同分辨率的設備。 相對于百分比單位（%）更加直觀，不需要手動計算每個元素的百分比值。 支持低版本瀏覽器，如果無法識別rem單位，也可以提供降級方案。
們將根元素字體大小設置為頁面寬度的百分之一，即font-size: calc(100vw / 100)。然后，在樣式表中使用rem作為單位對元素進行設置，例如.box { width: 20rem; height: 10rem; font-size: 1.6rem; }。這樣，當瀏覽器窗口大小改變時，根元素字體大小也會隨之改變，從而實現頁面的自適應布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Rem布局示例</title>
<style>
/* 設置根元素字體大小 */
html {
font-size: calc(100vw / 100);
}
/* 使用rem設置元素屬性 */
.box {
width: 20rem;
height: 10rem;
font-size: 1.6rem;
border:1rem solid #00000
}
</style>
</head>
<body>
<div class="box">這是一個自適應布局的示例</div>
</body>
</html>
npm install postcss-pxtorem postcss-loader --save-dev
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基礎字體大小
propList: ['*'], // 要轉換的屬性列表，這里表示所有屬性都要進行轉換
selectorBlackList: [], // 不需要轉換的選擇器，可以是字符串、正則表達式或者數組
unitPrecision: 5 // 轉換后的rem值保留小數位數
}
}
}
{
test: /.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
config: {
path: './path/to/postcss-config.js'
}
}
}
]
}
.container {
width: 320px;
font-size: 14px;
}
這樣，在編譯時，postcss-pxtorem會自動將像素單位轉換為rem單位。對于上述樣式代碼，轉換后的結果如下：
.container {
width: 20rem; /* 320 / 16 = 20 */
font-size: 0.875rem; /* 14 / 16 = 0.875 */
}
通過使用postcss-pxtorem插件，可以簡化自適應布局的實現，并且不需要手動計算每個元素的rem值。
作者：二哈怕不怕
鏈接：https://juejin.cn/post/7301985758467244043
如今人們經過手機閱讀網頁占了大多數，隨著閱讀方式的改動，網頁完成多終端自適應，無論關于防止工程師無謂的反復勞動或者是項目管理的便利性上來說重要性都是非常巨大的。
由于挪動設備越來越多的被人們運用，手機成為訪問互聯網的最常見終端，而我們設計的網頁確是為了呈如今PC端。
手機的屏幕比擬小，寬度通常在600像素以下，而PC的屏幕寬度，普通都在1000像素以上（目前主流寬度是1366×768），有的還到達了2000像素。同樣的內容，要在大小懸殊的屏幕上，都呈現出稱心的效果，并不是一件容易的事。
很多網站的處理辦法，是為不同的設備提供不同的網頁，比方特地提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比擬費事，同時要維護好幾個版本，而且假如一個網站有多個portal（入口），會大大增加架構設計的復雜度。
自適應是為了解決如何在不同大小的設備上呈現同樣的網頁。
如何進行自適應網頁設計
通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，在具體一點，就是瀏覽器上(也可能是一個app中的webview)用來顯示網頁的那部分區域，但viewport又不局限于瀏覽器可視區域的大小，它可能比瀏覽器的可視區域要大，也可能比瀏覽器的可視區域要小。在默認情況下，一般來講，移動設備上的viewport都是要大于瀏覽器可視區域的，這是因為考慮到移動設備的分辨率相對于桌面電腦來說都比較小，所以為了能在移動設備上正常顯示那些傳統的為桌面瀏覽器設計的網站移動設備上的瀏覽器都會把自己默認的viewport設為980px或1024px（也可能是其它值，這個是由設備自己決定的），但帶來的后果就是瀏覽器會出現橫向滾動條，因為瀏覽器可視區域的寬度是比這個默認的viewport的寬度要小的。
該meta標簽的作用是讓當前viewport的寬度等于設備的寬度，同時不允許用戶手動縮放。也許允不允許用戶縮放不同的網站有不同的要求，但讓viewport的寬度等于設備的寬度，這個應該是大家都想要的效果，如果你不這樣的設定的話，那就會使用那個比屏幕寬的默認viewport，也就是說會出現橫向滾動條。
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
把移動設備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動設備的viewport，ideal viewport的寬度等于移動設備的屏幕寬度，只要在css中把某一元素的寬度設為ideal viewport的寬度(單位用px)，那么這個元素的寬度就是設備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對ideal viewport 而設計的網站，不需要用戶手動縮放，也不需要出現橫向滾動條，都可以完美的呈現給用戶。
要得到ideal viewport就必須把默認的layout viewport的寬度設為移動設備的屏幕寬度。因為meta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設為width-device這個特殊的值就行了。
在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像素，這可能會造成我們的一個錯覺，那就是css中的像素就是設備的物理像素。但實際情況卻并非如此，css中的像素只是一個抽象的單位，在不同的設備或不同的環境中，css中的1px所代表的設備物理像素是不同的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個css像素確實是等于一個屏幕物理像素的。后來隨著技術的發展，移動設備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時，一個css像素是等于兩個物理像素的。
流動布局（fluid grid） "流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。
.main {float: right;width: 70%; }
.leftBar {float: left;width: 25%;}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。
"自適應網頁設計"的核心，就是CSS3引入的MediaQuery模塊。 它的意思就是，自動探測屏幕寬度，然后加載相應的CSS文件。
link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"
上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載a.css文件。
link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"
如果屏幕寬度在400像素到600像素之間，則加載b.css文件。
自適應與響應式的區別
自適應是為了解決如何才能在不同大小的設備上呈現同樣的網頁，讓同一張網頁自動適應不同大小的屏幕，根據屏幕寬度，自動調整網頁內容大小。但是無論怎樣，他們主體的內容和布局是沒有變的。
自適應還是暴露出一個問題，如果屏幕太小，即使網頁能夠根據屏幕大小進行適配，但是會感覺在小屏幕上查看，內容過于擁擠，響應式正是為了解決這個問題而衍生出來的概念。它可以自動識別屏幕寬度、并做出相應調整的網頁設計，布局和展示的內容可能會有所變動。
響應式布局被大家熟知的一個重要原因就是 twitter 開源了 bootstrap。
相比自適應網站，響應式網站省去了很多的控件，同時也省去了不少建立和維護的功夫。響應式布局就是一種流體，在按百分比縮放時也能相當的流暢。
使用響應式設計，你要記住所以的布局。這當然可能會使過程混亂，并且使設計更加復雜。這就意味著你應該專注于中等分辨率的視圖，然后再用media querie調整為更低或更高的分辨率。 所以通常的做法是，在一個新的項目中使用響應式設計，在后期的改造中使用自適應設計。
自適應可用于改造現有的網站使其更好地適應移動端。這使你的設計可控制和開發多個特定的視圖。你開發視圖的數量完全取決于你，你的公司和全面的預算。然而，它也提供了一定量的控件（例如在內容和布局上），如此你便無須使用響應式設計。但當你設計多種分辨率時你會發現，在改變窗口大小的時候將會“跳出”布局。
自適應網站可以用于設計和開發一個擁有多個自適應視圖的網站。所以這種設計通常用于改造網站。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
