-
css3 - Media Query
常見(jiàn)的屬性：
device-width，device-height? --? 屏幕寬高
width，height? ? ? ? ? ? ? ? ? ? ? ? ? --? 渲染窗口寬高
orientation????????????????????????????????--? 設(shè)備方向
resolution????????????????????????????????? --? 設(shè)備分辨率
查看全部 -
分辨率改變css的樣式
查看全部 -
1
查看全部 -
來(lái)咯ljlebl查看全部
-
移動(dòng)互聯(lián)網(wǎng)的多終端顯示
查看全部 -
響應(yīng)式設(shè)計(jì)
查看全部 -
CSS3-Media Query:
device-width, device-height 屏幕寬高
width, height: 渲染窗口寬高
orientation 設(shè)備方向
resolution 設(shè)備分辨率
查看全部 -
三種方式實(shí)現(xiàn)響應(yīng)式:js原生，css3media query，bootstrap等框架查看全部
-
響應(yīng)式設(shè)計(jì)的原則
移動(dòng)優(yōu)先：
1：在設(shè)計(jì)的初期就要考慮的頁(yè)面如何在多終端展示
漸進(jìn)增強(qiáng)
1：充分發(fā)揮硬件設(shè)備的最大功能
查看全部 -
響應(yīng)式布局的優(yōu)點(diǎn)和缺點(diǎn)
優(yōu)點(diǎn)：
1：解決了設(shè)備只見(jiàn)的差異化展示
缺點(diǎn)：
1：兼容性代碼多，工作量大，加載速度受影響。
2：對(duì)原有網(wǎng)站對(duì)布局會(huì)產(chǎn)生影響，用戶判斷未必準(zhǔn)確
查看全部 -
響應(yīng)式設(shè)計(jì)
1：讓一個(gè)網(wǎng)站可兼容不同分辨率的設(shè)備
2：給用戶更好的視覺(jué)使用體驗(yàn)
查看全部 -
css3-Media Query
常見(jiàn)的屬性：
device-width,device-height---屏幕寬高
width,height---渲染窗口寬高
orientation---設(shè)備方向
resolution----設(shè)備分辨率
查看全部 -
bootstrap是移動(dòng)優(yōu)先框架，要求寫(xiě)<meta name="viewport" content="width=device-width,initial-scale=1.0">
引用bootstrap <link href="css/bootstrap.min.css" rel="stylesheet">
IE8、IE9需要引入respond.js:
查看全部 -
Bootstrap框架可以解決低端瀏覽器不支持css3屬性的問(wèn)題，還能解決不同的分辨率設(shè)備上網(wǎng)頁(yè)的布局展示
Bootstrap:1.移動(dòng)優(yōu)先的簡(jiǎn)單框架? 2.好處是寫(xiě)非常少的代碼即可實(shí)現(xiàn)多終端的頁(yè)面適配
類似IE8這種古老的瀏覽器，不支持media query,? 需要引入Respond.js 去激活media query,Respond.js必須部署在websever域名下，不能在靜態(tài)資源域名,存在跨域
查看全部 -
@media screen and (min-width:480px){
????????body{background:blue;}
}
????當(dāng)屏幕大于480 背景變成藍(lán)色
查看全部 -
<link type="text/css" rel="stylesheet" href="link.css" media="only screen and (max-width:480px)">外鏈引入? ? ? ?
當(dāng)屏幕小于480的時(shí)候才能引用
查看全部 -
如何實(shí)現(xiàn)響應(yīng)式布局
CSS3-Media Query(最簡(jiǎn)單的方式)
借助原生Javascript(成本高，不推薦使用)
第三方開(kāi)源框架（可以很好的支持瀏覽器響應(yīng)式布局的設(shè)計(jì)）
查看全部 -
響應(yīng)式設(shè)計(jì)的原則
移動(dòng)優(yōu)先：在設(shè)計(jì)的初期就要考慮的頁(yè)面如何在多終端展示
漸進(jìn)增強(qiáng):充分發(fā)揮硬件設(shè)備的最大功能（IE6、IE7、IE8等低端瀏覽器不支持CSS3的屬性，需要用javascript方法hack完善交互，但在高端瀏覽器和支持css3屬性的瀏覽器 充分發(fā)揮硬件設(shè)備的功能，給用戶帶來(lái)更完美的體驗(yàn)）
查看全部 -
一、響應(yīng)式設(shè)計(jì)優(yōu)? ??
?1》 優(yōu)點(diǎn)：解決了設(shè)備只見(jiàn)的差異化展示? ??
? 2》 缺點(diǎn)：兼容性代碼多，工作量大，加載速度受影響??
? ? ? ? ? ? ? ? ? ?對(duì)原有網(wǎng)站布局會(huì)產(chǎn)生影響，用戶判斷未必精確
查看全部 -
一、什么是響應(yīng)式設(shè)計(jì)：1.讓一個(gè)網(wǎng)站可兼容不同分辨率的設(shè)備 2.給用戶更好的視覺(jué)使用體驗(yàn)
二.移動(dòng)互聯(lián)網(wǎng)催生了響應(yīng)式布局的誕生
查看全部 -
該套課程有提煉，有介紹思想，主要收獲： 媒體查詢； 刪格化布局； 組件。查看全部
舉報(bào)