vant樣式自適應居中 樣式區域

2021-10-18 13:40:43 字數 1775 閱讀 3534

頁面樣式

在axure 9中,由於有了負座標(負空間)系的特性。同時也為移動端設計提供了常見的頁面尺寸大小。主要分為we、ios(蘋果)手機裝置、android (安卓)手機裝置的常見尺寸。

axure 9提供了手機端的設計尺寸,最顯著的就是優化了手機端的預覽。

自適應檢視主要是在不同的瀏覽器尺寸下方便載入不同的頁面,在平時製作原型中我們很少使用到,但是如果想要自己通過axure做乙個靜態的**,考慮瀏覽器的自適應和手機瀏覽器的適應可以進行新增自適應檢視進行製作多種格式下的檢視,優化展示的體驗,此處就不過多敘述,具體在擴充套件教程中詳細說明

樣式區域主要進行元件的樣式的修改。本文主要對基本樣式進行講解,元件特有的樣式將在元件區域中進行詳細說明(以矩形為例)。

選中元件的名稱,系統預設為空(友好的命名可以在概要頁面快速查詢)。

x:元件左上角的x軸位置。

y:元件左上角的y軸位置。

°(旋轉):元件旋轉的角度(支援負角度的輸入,負角度系統會自動換算)。

w:元件的寬度。

h:元件的高度。

文字自適應寬度:在元件中存在元件上的文字採用自適應的方式。

文字自適應高度:在元件中存在元件上的文字採用自適應的方式。

文字自適應可以方式文字在不同瀏覽器中預覽導致文字換行錯位。可以其配合邊距進行使用,也是常用且實用的乙個功能。
主要進行文字的排版等。

字型:可以選擇替換文字的字型格式。(注意:1、如果原型需要在非本電腦展示,使用特殊的字型沒需要延時電腦提前安裝,不然瀏覽器會自動跟換為預設字型。2、注意字型的版權,確認是可以商用的字型(這裡有太多故事...),避免版權糾紛)。

字型屬性:如果安裝為系列字型,可以選擇字型的其他樣式屬性進行調整。

字型大小:調整字型顯示的大小。

字型顏色:調整字型顯示的顏色。

行間距:當存在換行的字段時,行間距控制上下行的距離。

字間距:字型之前的間距。

字型其他屬性:加粗、傾斜、下滑線、刪除線。

字型陰影:給字型新增陰影,可以設定陰影的大小和偏離方位(通過座標控制)。

字型對齊:左對齊、水平居中對齊、右對齊、上對齊、垂直居中對齊、下對齊。

陰影在原型製作中比較少用,在用到的時候自己可以嘗試多調整下,來達到想要的效果。axuer中的陰影只通過座標可以調整顯示方向。
設定元件的圓角,圓角支援四個角度單獨設定圓角,

顯示文字距離元件的父容器的距離,具體延時見位置尺寸的gif插圖的最後部分。

其實邊距挺實用的,合理的設定邊距可以方便原型的尺寸對齊,從而做出高保真的原型。

自適應,響應式樣式

body div,ul,a,li,img,p ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd input lf rt clear a.col 1 col 2 col 3 col 4 col 5 col 6 col 7 col 8 col 9 col 10 col 11 col ...

CSS自適應樣式表

在我們開發的過程中,使用響應式頁面是,可能有時候需要pc端和移動端的樣式不一樣,這個時候如果用js的方式 簡單的還可以.多的話就顯得很臃腫 要加很多判斷 響應速度大大降低.這個時候 我們可以使用 css3中的 media屬性,我們先建立乙個html頁面 你好啊 然後引入主樣式表 index.css ...

文字自適應容器長度的樣式

容器的樣式 display block 內聯物件需加 width 100 必須為容器指定寬度,絕對寬度,百分比寬度這兩種方式都可以。word break keep all 不換行 white space nowrap 不換行 overflow hidden 內容超出寬度時隱藏超出部分的內容 text...