響應式設計
媒體查詢
響應式設計是根據不同裝置浏覽器分辨率或尺寸來展示不同頁面結構,行為,表現的設計方式.
響應式設計的基本原理是通過媒體查詢檢測不同的裝置的螢幕尺寸做處理.頁面頭部必須有meta聲明viewport:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
有了媒體查詢這個功能,自然有了所謂的響應式.
響應式的特點
設計特點:
1.面對不同分辨率裝置靈活性強
2.能夠快捷解決多裝置顯示的問題
缺點:
1.相容各種農裝置工作量大,效率低下
2.代碼累贅,會出現隐藏的無用的元素,加載時間加長,其實這是一種折中性質的設計解決方案,多方面的因素影響而達不到最佳的效果
3.一定程度上改變了網站原有的布局,會出現使用者混淆的情況
1.bootstrap架構中的栅格布局
網格系統的實作原理是通過定義容器的大小,平分為12份(也有平分為24份,32份的,但是12份的是比較常見的),在調整内外邊距,最後掘和媒體查詢,就制作出了強大的響應式網格系統,Bootstrap架構中的網格系統就是将容器平分為12份的
bootstrap有哪些缺點?
個人認為,所謂優缺點都是相對的,多數根據業務需求而定的.比如bootstrp2 以後的版本不支援IE6.當你的網站需要相容到IE6的時候就不能使用bootstrap,當不需要的時候就變成了有點,通過現有的ui架構就能迅速的搭建前端頁面.同僚還可以用less重新設計元件.
3.bootstrap常用的有哪些元件
1.輪播圖
2.下拉菜單
3.響應式的導航欄
移動端的頁面布局
1.彈性布局(100%布局,流式布局)
好處:充分發揮大手機的優勢---顯示内容越多
缺點:螢幕過大,間距過大,比例失調.
特點:頂部和底部不管分辨率怎麼變,他的高度和位置都不會改變:
中間每條招聘資訊分辨率怎麼變,招聘公司的圖示do 條目的左邊,薪資在右邊;
2.等比縮放布局(rem)--網易,淘寶首頁
視口(viewport)設定:
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
-html上根據不同分辨率設定不同font-size,通過Js計算出來
移動端頁面重構常用機關
因為要适用所有的移動端螢幕尺寸,是以傳統的Px布局頁面在移動端就不太适用.
em是父盒子的倍數,rem是跟元素的倍數
1.rem是指相對于根元素的字型大小機關,能等比例适配所有螢幕,根據變化html也就是根元素的字型大小來控制rem的大小;
js計算:通過擷取視口的寬度/實際設計圖的寬度*html的font-size
2.css3新增機關.vw,vh
VW:視窗寬度，1VW等于視窗寬度的百分之一
VH:視窗高度，1VW等于視窗高度的百分之一
我們也可以把VW轉換成PX指派給font-size，
元素所展示的大小（設計圖固定大小）=（VW*設計稿寬度）/100
VW = 元素所展示的大小（設計圖固定大小）*100/設計稿寬度
例如：裝置的分辨率為640*1136，邏輯像素為320*568，1VW就等于3.2px，我們把font-size：100px，轉換成VW就等于31.25VW;
1rem等31.25VW擷取到根元素大小一起結合寫等比例綻放布局。
VW，VH是CSS3新增的機關，它隻能有着自己的相容性，IE9+局部支援，chrome/firefox/safari/opera支援，iOS safari 8+支援，Android browser4.4+支援，chrome for android39支援。
flexible.js是淘寶為了适配移動端開發的一個插件 http://huodong.m.taobao.com/act/yibo.html
flexible.js 做的三件事：
- 動态改寫标簽
- 給<html>元素添加data-dpr屬性，并且動态改寫data-dpr的值
- 給<html>元素添加font-size屬性，并且動态改寫font-size的值
目前Flexible會将視覺稿分成**100份**（主要為了以後能更好的相容vh和vw），而每一份被稱為一個機關a。同時1rem機關被認定為10a。針對我們這份視覺稿可以計算出：
- 1a = 7.5px
- 1rem = 75px
https://github.com/flashlizi/cssreml轉換插件
.adapter_size {font-size: 12px;}
[data-dpr="2"] .adapter_size {font-size: 14px;}
[data-dpr="3"] .adapter_size {font-size: 16px;}
動态計算html的font-size
<script type="text/javascript">
document.documentElement.style.fontSize=document.documentElement.clientWidth /100*31.25 + 'px'
</script>
<script type="text/javascript">
// 把尺寸放大N倍（N是window.devicePixelRatio）
var wd = document.documentElement.clientWidth*window.devicePixelRatio/10;
document.getElementsByTagName("html")[0].style.fontSize = wd + "px";
// 把螢幕的倍率縮小到N分之一（N是window.devicePixelRatio）
var scale = 1/window.devicePixelRatio;
var mstr = 'initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';
document.getElementById("vp").content = mstr;
</script>
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
淺談px、em、rem的用法和差別
轉載于:https://baijiahao.baidu.com/s?id=1637480830445523833&wfr=spider&for=pc
![bootstrap栅格布局筆記（1）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)