前端布局方法之流式布局

2021-10-01 15:12:47 字數 540 閱讀 1011

移動端

viewport是瀏覽器顯示頁面內容的螢幕區域

viewport 是使用者網頁的可視區域。

viewport 翻譯為中文可以叫做"視區"。

layout viewport

visual viewport

理想視口

meta標籤

視口寬度和裝置寬度一致

預設縮放比例為1.0

不允許使用者縮放

最大縮放比例1.0

最小縮放比例1.0

@2x.png

@3x.png

物理畫素

物理畫素比 例如手機物理解析度750 ,開發尺寸375

開發時候的1px和物理畫素的關係

二倍圖背景縮放background-size

px百分比

contain

cover

盒子模型, border和padding不會撐大盒子了

box-sizing: border-box

normalize.css

前端布局(流式布局 響應式布局 彈性布局等)

自適應布局的特點是分別為不同的螢幕解析度定義布局,即建立多個靜態布局,每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性 頁面元素位置發生改變 但在每個靜態布局中,頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。1 布局特點 螢幕解析度變化時,頁...

GUI之流式布局管理器

1.流式布局管理器 flowlayout,最簡單的布局管理器,當你向容器新增元件時,會按照從左到右放置。到達邊界時,會跳轉到下一行。flowlayout 如果不進行設定,元件會預設居中對齊,水平,垂直間距預設5個單位。flowlayout int align 指定容器的對齊方式,水平,垂直間距預設5...

布局管理 流式布局

2007 11 16 14 18 使用流式布局管理器時,gui元件將按照新增入容器的順序自左而右排列在一行上,如果一行空間不足,則另起一行。預設情況下,元件是劇中排列的。可以通過改變面板的預設布局管理器來改變元件在每一行上的排列位置。語句示例如下 flowlayout fl new flowlayo...