響應(yīng)式開發(fā)網(wǎng)站

zhongmeizhi 發(fā)布于2019-08-30 15:53 / 2400人閱讀

摘要：響應(yīng)式布局，先看效果大屏效果中屏效果小屏效果下面是一些筆記心得響應(yīng)式網(wǎng)站的優(yōu)點減少工作量網(wǎng)站，設(shè)計，代碼，內(nèi)容都只有一份做少量更改節(jié)省時間多個分辨率設(shè)備都能正確顯示搜索優(yōu)化缺點會加載更多的樣式和腳本資源設(shè)計比較難精確定位和控制老版本瀏覽器的

FlexLayout

https://github.com/whhlulu/Re...

響應(yīng)式布局，先看效果 大屏效果：>50rem

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

小屏效果：<30rem

下面是一些筆記心得

================================================
PART I：
響應(yīng)式網(wǎng)站的優(yōu)點：
1 減少工作量
1）網(wǎng)站，設(shè)計，代碼，內(nèi)容都只有一份
2）JS,CSS做少量更改
2 節(jié)省時間
3 多個分辨率設(shè)備都能正確顯示
4 搜索優(yōu)化

缺點：
會加載更多的樣式和腳本資源
設(shè)計比較難精確定位和控制
老版本瀏覽器的兼容問題

================================================
PART II：
主流瀏覽器
Chrome
IE/Edge（Edge : > 12)
Firefox
QQ（微信采用QQ瀏覽器X5的內(nèi)核）
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: 渲染表面的寬度，就是設(shè)備屏幕的寬度
device-height:渲染表面的高度，就是設(shè)備屏幕的高度

orientation:檢查設(shè)備處于橫向/縱向
aspect-ration:基于視口的寬高比
device-aspect-ratio: 渲染表面的寬度，就是設(shè)備屏幕的寬度
color:每種顏色的位數(shù)bits，比如 min-color:16位，8位
resolution:檢測屏幕或打印機的分辨率，如： min-resolution:300dpi

以上屬性都可以添加 min- 或 max- 前綴

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

viewport 視口
針對PC，只有一個視口
針對移動設(shè)備，有三個視口：
布局視口(layout viewport)
可視視口(visual viewport)
理想視口(ideal viewport)

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

===============================================
cssreset.css 用來消除所有瀏覽器在一些默認樣式上面的差異
normailize.css 是 cssreset.css 的優(yōu)化版本，使用更加廣泛

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