不同 ots html標簽 不同的 默認 dia 代碼 max 屏幕

微金所
一、媒體查詢
在響應式開發中使用媒體查詢中的screen查詢瀏覽器的寬度來定義不同寬度區間的樣式和布局。
代碼：
@media screen and (min-width: 768px){}
@media screen and (min-width: 992px){}
@media screen and (min-width: 1200px){}
或者
@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 991px){}
@media (min-width: 992px) and (max-width: 1199px){}
@media (min-width: 1200px){}
二、結構選擇器
div a{}
div > a {}
div + div {} 選擇目標元素的下一個元素
div ~ div {} 選擇目標元素之後的所有同級元素
三、Bootstrap常用樣式
1、container類
用於定義一個固定寬度且居中的版心
2、row類
每一個列默認有一個15px的左右外邊距，row類的一個作用就是通過左右-15px屏蔽掉它
xs : 超小屏幕 手機 (<768px)
sm : 小屏幕 平板 (≥768px)
md : 中等屏幕 桌面顯示器 (≥992px)
lg : 大屏幕 大桌面顯示器 (≥1200px)
3、hidden 類
hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隱藏。
4、text- 類
text-center 文本居中
text-left 文本左對齊
text-right 文本右對齊
5、pull- 類
pull-left 左浮動類
pull-right 右浮動類
6、center-block 類
讓一個固定寬度的元素居中。
7、display: table-cell
四、rem
相對長度單位，相對於html根元素font-size計算值得倍數
test布局 //白青衣/rem插件/rem/rem.css
flexible布局//白青衣/rem插件/flexible/rem.css
淘寶這個方案可以在任意設計稿尺寸下使用（地址：https://github.com/amfe/lib-flexible）
1）除font-size外，
其它大小都根據750標註稿的尺寸，轉換成rem單位的值，轉換方法為：
標註稿尺寸 / 標註稿基準字體大小；
2）標註稿基準字體大小 = 標註稿寬度 / 10，
如標註稿寬為750，標註稿基準字體大小為75；標註稿寬為640，標註稿基準字體大小為64；
em的大小是根據父元素的font-size來設置的
rem的大小是根據html標簽的font-size來設置的
標簽屬性
提供給屏幕閱讀器的屬性，我們可以忽略
role、 aria-*、 class="sr-only"
指定插件類型，和控制的目標元素
data-toggle
data-target
a標簽也可以通過href來指定被控制的目標元素
輪播圖
1、自適應圖片：
在pc端使用的是背景圖片，在移動端使用的是圖片
2、在寫靜態demo的時候使用的是響應式工具來完成的圖片響應，但是會加載兩種圖片那麽這時候就需要做圖片的響應式了，首先我們準備了json 中有兩種數據，然後ajax請求 到數據做緩存 如果請求過就直接取緩存的，然後通過模版引擎解析成html，最終把解析完成的html渲染在頁面當中。七、自定義字體：聲明自定義字體的名字，引入字體文件，指定字體文件的格式
@font-face{
br/>七、自定義字體：聲明自定義字體的名字，引入字體文件，指定字體文件的格式
@font-face{
src: url(../fonts/MiFie-Web-Font.eot) format("embedded-opentype");
src: url(../fonts/MiFie-Web-Font.svg) format("svg");
src: url(../fonts/MiFie-Web-Font.ttf) format("truetype");
src: url(../fonts/MiFie-Web-Font.woff) format("woff");
}
wjs_icon{font-family: wjs; }
通過偽類來定義一個字體圖標，字體圖標設計出來的時候一般都會有文檔參考
wjs_icon_phone:before{
content: "\e908";

移動web開發———第四天