1. 程式人生 > >響應式開發網站

響應式開發網站

FlexLayout

響應式佈局,先看效果

大屏效果:>50rem

大圖

中屏效果:>30rem, <=50rem

大圖

小屏效果:<30rem

小圖

下面是一些筆記心得

================================================

PART I:
響應式網站的優點:
1 減少工作量
1)網站,設計,程式碼,內容都只有一份
2)JS,CSS做少量更改
2 節省時間
3 多個解析度裝置都能正確顯示
4 搜尋優化

缺點:
會載入更多的樣式和指令碼資源
設計比較難精確定位和控制
老版本瀏覽器的相容問題

================================================
PART II:
主流瀏覽器
Chrome
IE/Edge(Edge : > 12)
Firefox
QQ(微信採用QQ瀏覽器X5的核心)
Safari/iOS Safari
360
UC
獵豹

================================================
PART III:
媒體查詢 1
@media all and(min-width:800px) and (orientagion: landscape){

}

邏輯操作查詢符:not and only , (, 等同於 or)

css3媒體屬性

width: 視口寬度
height: 視口高度
device-width: 渲染表面的寬度,就是裝置螢幕的寬度
device-height:渲染表面的高度,就是裝置螢幕的高度

orientation:檢查裝置處於橫向/縱向
aspect-ration:基於視口的寬高比
device-aspect-ratio: 渲染表面的寬度,就是裝置螢幕的寬度
color:每種顏色的位數bits,比如 min-color:16位,8位
resolution:檢測螢幕或印表機的解析度,如: min-resolution:300dpi

以上屬性都可以新增 min- 或 max- 字首

================================================
媒體查詢 2
width: 視口寬度
device-wdith

viewport 視口
針對PC,只有一個視口
針對移動裝置,有三個視口:
佈局視口(layout viewport)
可視視口(visual viewport)
理想視口(ideal viewport)

===============================================
強制使用最新版本的IE文件模式

<meta http-equiv="x-ua-compatible" content="id=edge">

===============================================
cssreset.css 用來消除所有瀏覽器在一些預設樣式上面的差異
* cssreset.css * 的優化版本,使用更加廣泛

===============================================
長度單位: px, em, rem
使用相對的值,不同的顯示屏尺寸會有變化
px : 固定的單位
em : 相對的長度單位,參照了父元素的font-size,具有繼承的特點,如果一直找父容器都找不到font-size,那會使用瀏覽器的預設em設定:1em = 16px
rem :也是使用相對值,不過是參照了 html 元素,瀏覽器的預設值也是:1rem = 16px