-
bootstrap必須加入此meta標簽查看全部
-
<link type="text/css" rel="stylesheet" href="../static/css/bbb.css" media="only screen and (max-width:480px)"> <style> @media screen and (min-width:480px){ body{background: yellowgreen;} } </style>查看全部
-
...查看全部
-
css3-media Query：常見屬性查看全部
-
rel 屬性規定當前文檔與被鏈接文檔之間的關系。查看全部
-
響應式布局之bootstrap框架： 1、是一種移動優先的前端框架；不僅可以幫助解決低端瀏覽器不支持css3的問題，同時解決了不同分辨率上網頁布局的展示 2、優點：寫非常少的代碼，即可實現多終端的頁面適配； 3、源文件主要有兩部分構成，即CSS,JS和font字體； 4、bootstrap的源代碼是Less文件，不改變源代碼的情況下可以直接下載編譯后的文件； 5、幾乎支持所有瀏覽器，對于IE8/9需要引入Respond.js文件激活IE8/9對Media Query的支持； 6、最好把respond.js和網站部署在同一個域名下，避免出現跨域問題查看全部
-
bootstrap的搭建 必須要有個meta標簽 initial-scale：默認縮放，用于展示網頁的設備的合適范圍大小 還有一個respond的問題查看全部
-
CSS3-Media Query 內嵌語法。 當屏幕的寬度大于480px時 的css語句查看全部
-
外聯樣式表查看全部
-
CSS3-Media Query 外聯語法。 當屏幕寬度小于等于480px時 的css語句查看全部
-
響應式設計優缺點查看全部
-
屬性device-width，device-height，orientation，resolution查看全部
-
想要實現頁面原有的效果樣式，必須引入相關的樣式表，在添加相對的容積查看全部
-
重點}響應式布局之bootstrap 1、Bootstrap重要特征 一套完整基礎的CSS插件 豐富的預定義樣式表 一組基于jQuery的JS插件集 崇尚移動(Mobile First)先行，非常靈活的響應式(Responsive)柵格系統 2、Bootstrap官網: www.getbootstrap.com 或 直接在GitHub網站上在線閱讀源碼，目錄分別是js和less ---- http://github.com/twbs/bootstrap 3、HTML標準模板 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 默認情況下，UI布局的寬度和移動設備的寬度一致，縮放大小為原始大小 <!- -bootstrap - -> <link href="css/bootstrap.min.css" rel="stylesheet"> <!- -以下2個插件是用于在IE8支持HTML5元素和媒體查詢的，不用可移除- -> <!- - Respond.js不支持file://方式訪問- -> <!- -[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/htmlsshiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/reapond.min.js"></script> <![endif]- -> <!- -如果使用Bootstrap的JS插件，則必須引入jQuery- -> <script src="https://code.jquery.com/jquery.js"></script> <!- - Bootstrap的js插件- -> <script src="js/bootstrap.min.js"></script>查看全部
-
CSS Media Quary常見屬性 device-width,device-height—設備寬高 width,height-渲染窗口寬高 orientation-設備方向 resolution-設備分辨率查看全部
舉報
0/150
提交
取消