上述為對頁面是否可縮放的設置，接下來一個更重要的概念是媒體查詢，媒體查詢這個鏈接是對媒體查詢比較詳細的描述。總而言之：媒體查詢是通過設置在不同媒體條件下，顯示不同樣式，從而達到不同的渲染效果。即針對不同設備條件，寫了多份css代碼，以適應不同的顯示需求。由媒體查詢概念的使用，催生了響應式布局這門技術，這篇鏈接文章是對響應式布局核心內容的大體介紹。

實習單位也有自己的響應式布局css適配文件，這裡看一部分代碼內容：

@media only screen and (max-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 310px) and (min-width: 300px) {
body{font-size:8.33333px!important}
.viewport{max-width:300px}
}
@media only screen and (max-width: 320px) and (min-width: 310px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:320px}
}
@media only screen and (max-width: 360px) and (min-width: 320px) {
body,table{font-size:8.88889px!important}
.viewport{max-width:360px}
}

（1）此文件給出的媒體查詢根據屏幕寬度來查詢媒體，並進行不同的樣式設置。

（2）這裡媒體查詢根據不同設備寬度設置字體的大小和可是區域的大小。同時應用此媒體查詢應該將包裹所有內容的最外層div設置成viewport類。

（3）設置各個標簽寬度時，除非根據不同媒體設置不同寬度，否則不能使用像素寬，而是使用百分比。即布局有兩種方法①.根據不同媒體設置不同寬度 ②.統一用百分比表示寬度。

上述兩圖為分別在chrome上模擬ipad和ipnoe上顯示的效果，從css欄中可以看出，根據媒體的不同，媒體查詢出相應的樣式進行了渲染。

彈出窗特效的原理：

(1)彈出框中的內容放置在一個特殊的DIV層中，然後默認隱藏它（即初始不可見，display:none）。

(2)當用戶執行某個動作時,我們將之前設置好的隱藏層顯示在所有頁面元素的最上層（將使用JS操作實現）。

(3)在彈出DIV窗口中設 置一個按鈕來執行——當用戶點擊此按鈕時關閉窗口的功能。

彈出窗實現，構造外層div，這裡外層div的樣式設置非常重要：

.dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: none;
  height:100%;
  width:100%;
  background-color: rgba(0, 0, 0, .7);
}

.dialog-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 492px;
  height: 458px;

  background-image: url(popup.png);
  background-repeat: no-repeat;
  background-size: contain;

  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

4.交互（js/jQuery）：

根據原型圖判斷需要實現的用戶行為交互。

添加交互：

用戶輸入手機號提交號碼判斷是否為舉辦活動地區的電信手機號，

如果是則提交號碼到後台，並彈出提示框。

否則紅字顯示請輸入正確電信手機號。

技術實現：

（1）此項目是電信在多個省份開展活動，所以會涉及到電話號碼匹配的問題：需要匹配兩項數據一個是運營商是否正確，另外一個則是是否為所在活動省份。

這裡產品給了一張excel表格列出了電信號碼號段，excel之長無法完全匹配，於是找到個一種更方便的方法：網上有很多電話號碼歸屬地驗證的開放接口，這裡選用的是淘寶的電話號碼歸屬地接口。通過正則表達式將所有的省份都列出來，判斷返回數據是否為電信號碼同時也是開展活動的號碼實現要求。

var validate = false;

    $.get("http://tcc.taobao.com/cc/json/mobile_tel_segment.htm",{tel:val},
            function(data){
              pattern1 = /電信/;
              pattern2 = /(北京)|(上海)|(江蘇)|(湖南)|(浙江)|(江西)|(福建)|(雲南)|(貴州)|(青海)|(黑龍江)|(遼寧)|(湖北)|(甘肅)|(重慶)|(廣東)|(海南)|(新疆)|(河南)/;
              if(pattern1.test(data["catName"])){
                if(pattern2.test(data["province"]))
                {
                  validate = true;
                }
           },"jsonp");//引用淘寶接口，首先對運營商進行判斷，然後對省份進行判斷

    
  });//提交電話號碼，如果正確生成彈窗，否則重新輸入，提供錯誤信息

（二）．“看世界杯送流量”宣傳頁

這個頁面非常簡單，需求僅僅是將頁面放到居中位置，引入適配；添加一個下載按鈕即可。

.viewport img {
	max-width: 100%;
	margin-bottom: 30px;
}

交互方面遇到了一個小bug：在確定下載按鈕寬度時，是根據圖片寬度確定的，而圖片有個加載時間，這就可能造成第一次加載不成功，而第二次因為有緩存，可以加載成功。改進的代碼。

 $("img").load(function(){
    $("div").text("圖像已加載");
  });

（三）．發現新功能“我的”宣傳頁