(HTML5)第七章 css3和響應式設計

2021-07-30 00:18:33 字數 626 閱讀 8951

響應式設計的思想就是讓網頁布局、和字型自適應視窗大小

百分比和em功能相同,讓文字相對於瀏覽器預設的文字大小縮放。

把文字大小設定為110%或1.1em,結果就是比常規沒有應用樣式的文字打10%。

響應式布局常用設定方式:

body

pp

同時,對於邊框、內邊距和外邊距,也用em單位設定,可以防止元素在小視窗裡顯示得過大,或者說在移動裝置的小螢幕上顯得太過突兀。如:

.leftcolumn

.rightcolumn

.leftcolumncontent

問題--對於多層巢狀的布局

應用等比縮放----css3中引入了新單位rem,始終相對與預設文字大小進行計算。

理解視口

對於設計乙個真正的、移動裝置友好的**:1、修改視口的設定 2、使用**查詢簡化布局在小螢幕中顯示時的效果。

其中方案一如下:

可以讓網頁在iphone裝置顯示時,禁用縮放,看到頁面在小螢幕中的真實效果。

ps: 可以讓你在最新的iphone、ipad和android裝置上比較**的外觀

具體內容待續~~~

響應式Web設計 HTML5和CSS3實戰

內容簡介 移動網際網路時代到來了。響應式web設計 html5和css3實戰 將當前web設計中熱門的響應式設計技術與html5和css3結合起來,為讀者全面深入地講解了針對各種螢幕大小設計和開發現代 的各種技術。不僅討論了 查詢 流式布局 相對字型 響應式 更將html5和css3的相關知識點一併...

HTML5和CSS3響應式WEB設計指南》譯者序

不是我不明白,這世界變化快。崔健的這首歌使用在網際網路領域最合適不過。只短短數年的功夫,網際網路的浪潮還沒過去,移動網際網路的時代已經來臨。人們已經習慣將越來越多的時間花在各種移動裝置上。各大網際網路公司先知先覺,在移動網際網路領域殺的不可開交,甚至很多傳統行業公司也在積極尋求自身領域與移動網際網路...

css3和html5的基礎

流式布局 應對視窗大小做等比例縮放布局 簡單來說利用百分數來進行布局 css3的box sizing與calc 通常設定邊框會被設定在元素的外圍 box sizing屬性值設為border box時邊框就加在元素內部 css3中在進行響應式布局時需要對不不同的螢幕大小設定不同的div排序方式。這時候...