Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 草草影院第一页,在线综合+亚洲+欧美中文字幕,高清国产一区二区三区 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢(xún)熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          如何讓網(wǎng)頁(yè)更機(jī)智地，適配不同的尺寸 - css進(jìn)階
          
        
           
          
	
	
          
		如何讓網(wǎng)頁(yè)更機(jī)智地，適配不同的尺寸 - css進(jìn)階
          
                        

          體查詢(xún)
          響應(yīng)式網(wǎng)頁(yè)是這幾年很流行的網(wǎng)頁(yè)風(fēng)格之一，他能夠以一套網(wǎng)頁(yè)代碼，面對(duì)不同的條件，例如改變?yōu)g覽器的寬度，手機(jī)橫豎屏，作出不同的樣式調(diào)整。

          一套代碼走天下

          最出名的響應(yīng)式框架是Bootstrap，來(lái)自Twitter。也是每個(gè)剛?cè)腴T(mén)前端開(kāi)發(fā)師必學(xué)的框架，利用這個(gè)框架可以很輕松實(shí)現(xiàn)響應(yīng)式效果。

          面對(duì)不同的瀏覽器寬度，作出界面調(diào)整

          要實(shí)現(xiàn)響應(yīng)式，關(guān)鍵在于使用媒體查詢(xún) Media！

          語(yǔ)法

          @media （媒體特性）and （媒體特性） {你的樣式}

          看起來(lái)好像很復(fù)雜，先看完整的代碼
          @media  (max-width:480px){ 
    body{background-color:green}
 }
          上面這句話的意思，瀏覽器的寬度小于或等于480px時(shí)，背景顏色是綠色。

          再來(lái)多一個(gè)，如下
          @media  (min-width:481px){ 
    body{background-color:red}
}
          上面這句話的意思，瀏覽器的寬度大于或等于481px時(shí)，背景顏色是紅色。

          媒體特性
          媒體特性就是依據(jù)什么樣的條件來(lái)進(jìn)行更改樣式，是根據(jù)屏幕寬度大小、還是橫豎屏呢。這些條件都是官方定的，非常多。但實(shí)際上，真正有用的就是 min-width和max-width，根據(jù)瀏覽器寬度來(lái)設(shè)定不同的樣式。

          這里會(huì)很容易混淆min-width和max-width的意義。min-width表示大于等于，max-width表示小于等于。
          @media (max-width: 500px) {
    /** 窗口寬度小于等于500像素的樣式 **/
}

          @media (min-width: 800px) {
    /** 窗口寬度大于等于800像素的樣式 **/
}

          當(dāng)有多個(gè)媒體特性時(shí)，用and連接，就可以形成一個(gè)區(qū)間范圍
          @media (min-width: 600px) and (max-width: 700px) {
    /** 窗口寬度在600-700像素的樣式 **/
}

          這就是他最基本的用法，凡是有兩面性，下面來(lái)說(shuō)說(shuō)他的優(yōu)缺點(diǎn)。
          優(yōu)點(diǎn)
          （1）面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
          （2）能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題
          缺點(diǎn)
          （1）兼容各種設(shè)備工作量大，效率低下
          （2）代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)

          案例
          全局布局
          下面這種響應(yīng)式布局最為常見(jiàn)，通過(guò)媒體查詢(xún)定義不同的樣式，讓其能夠適應(yīng)手機(jī)瀏覽器和桌面瀏覽器：

          1、電腦端大屏幕下，網(wǎng)頁(yè)元素全部展示
          電腦端樣式

          2、手機(jī)端下，因?yàn)槠聊挥邢蓿荒茏屩黧w內(nèi)容呈現(xiàn)出來(lái)，其余部分隱藏起來(lái)，并且讓字體縮小。
          手機(jī)端樣式

          柵格布局
          一提起響應(yīng)式，絕對(duì)離不開(kāi)強(qiáng)大的柵格布局，根據(jù)瀏覽器的寬度，設(shè)置容器不同的列寬。

          <div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8"></div>
  <div class="col-xs-12 col-sm-6 col-md-8"></div>
</div>

          只需要按照填寫(xiě)bootstrap參數(shù)，即可匹配不同的寬度

          柵格布局的原理其實(shí)也是利用了媒體查詢(xún)，這樣你就可以自定義一份自己的柵格布局。
          部分源代碼

          總結(jié)
          1. 基本要求
           前端界面顯示的速度一般要求是：60fps
           2. 根據(jù)要求 1s / 60=16.67ms 即：處理一個(gè)界面的時(shí)間，除了瀏覽器自己需要的時(shí)間，開(kāi)發(fā)者能使用的時(shí)間大概10ms
           10ms中處理的流程為：
           javascript > style > layout > paint > composite
           如果JS的操作影響到了界面樣式的變化，則有上面的處理流程
           如果style的操作影響到布局，則會(huì)進(jìn)入layout，反之亦然；style改了transform屬性，在blink和edge瀏覽器里面不需要layout和paint
           3. 減少渲染堵塞
           避免head標(biāo)簽JS堵塞
           異步加載JS: HTML5 的script 屬性 defer
           JS寫(xiě)在body后面
           Tips: 可能有時(shí)候JS庫(kù)，還沒(méi)加載完就要執(zhí)行了，可能會(huì)報(bào)錯(cuò)
           減少 head 中的 CSS 資源
           CSS 會(huì)影響到 layout ，寫(xiě)在Body里面會(huì)界面閃爍，但寫(xiě)在Head里面如果太多會(huì)影響渲染
           不要寫(xiě)太多base64，雖然很方便，但會(huì)改變文件大小
           如果CSS文件沒(méi)有達(dá)到三位數(shù)的大小，可以直接寫(xiě)到Html界面中，因?yàn)槿绻褂猛怄湗邮剑瑒t可能會(huì)花費(fèi)更多時(shí)間，如DNS解析，建立鏈接，下載等
           優(yōu)化圖片，使用響應(yīng)式圖片，圖片的srcset 屬性，會(huì)有兼容問(wèn)題
           <img srcset='photo_w350.jpg 1x photo_w640.jpg 2x' src='phtot_w350.jpg' alt=''>
           使用picture按需加載，需要寫(xiě)在HTML中，如果使用JS來(lái)調(diào)用，則無(wú)效
           <picture>
           <source srcset='baner_w1000.jpg' media="(min-width:801px)"> # source 還有其它的優(yōu)化屬性，不過(guò)會(huì)有兼容問(wèn)題: type='image/webp'
           <source srcset='baner_w800.jpg' media="(max-width:800px)">
           <img src='baner_w800.jpg' alt=''> # picture 必需有 img 標(biāo)簽，只有img標(biāo)簽才會(huì)觸發(fā)onload事件; picture 與 source 都不觸發(fā) layout
           </picture>
           判斷瀏覽器是否支持：
           var supportSrcset='srcset' in document.createElement('img');
           var surportPicture='HTMLPictureElement' in window;
           延遲加載
           <picture>
           <source data-srcset="photo_w350.jpg 1x, photo_w640.jpg 2x">
           <img data-src="photo_w350.jpg" src="about:blank" alt=""> # src 寫(xiě)為此值不會(huì)報(bào)錯(cuò)，也對(duì)瀏覽器友好
           </picture>
           監(jiān)聽(tīng)Scroll事件
           showImage(leftSpace=500){
           var scrollTop=$window.scrollTop(), $containers=this.$imgContainers, scrollPosition=$window.scrollTop() + $window.height();
           for(var i=0; i < $containers.length; i++){
           //如果快要滑到圖片的位置了
           var $container=$containers.eq(i);
           if($container.offset().top - scrollPosition < leftSpace) {
           this.ensureImgSrc($container);
           }
           }
           }
           ensureImgSrc($container) {
           var $source=$container.find("source");
           if($source.length && !$source.attr("srcset")){
           $source.attr("srcset", $source.data("srcset"));
           }
           var $img=$container.find("img:not(.loading)");
           if($img.length && $img.attr("src").indexOf("http://") < 0){
           $img.attr("src", $img.data("src"));
           this.shownCount++;
           }
           }
           init(){
           //初始化
           var leftSpace=0;
           this.showImage(leftSpace);
           //滑動(dòng)
           $window.on("scroll", this, this.throttleShow);
           }
           ensureImgSrc($container){
           //如果全部顯示，off掉window.scroll
           if(this.shownCount >=this.allCount){
           $window.off("scroll", this.throttleShow);
           }
           }
           指定圖片尺寸，避免 reflow
           4. 壓縮與緩存
           作用
           第一個(gè)是把200變成304，避免資源重新傳輸，
           第二個(gè)是讓瀏覽器直接從緩存取，連http請(qǐng)求都不用了，這樣對(duì)于第二次訪問(wèn)頁(yè)面是極為有利的。
           開(kāi)啟壓縮 gzip
           server {
           gzip on;
           gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript
           }
           緩存 Cache-Control
           location ~* \.(jpg|gif|png|webp) {
           expires 30d;
           }
           location ~* \.(css|js) {
           expires 1d;
           }
           此方法會(huì)在返回的請(qǐng)求響應(yīng)頭中添加 Cache-Control: max-age=604800 ， 且 max-age 的優(yōu)先級(jí)會(huì)大于 last-modified
           開(kāi)啟 nginx last-modified 字段，在響應(yīng)頭中： last-modified 字段接收nginx的數(shù)據(jù)，在請(qǐng)求頭中： If-Modified-Since 字段返回給nginx
           這個(gè)辦法得查手冊(cè)
           使用etag，在響應(yīng)頭中是： Etag 字段 ，在請(qǐng)求頭中會(huì)記錄在 If-None-Match 字段
           server {
           etag on;
           }
           5. 其它優(yōu)化
           DNS預(yù)讀取
           <link rel="dns-prefection" > # 在Head標(biāo)簽中添加相應(yīng)的域名，由于它是并行的，不會(huì)堵塞頁(yè)面渲染
           HTML優(yōu)化
           刪除注釋、縮進(jìn)，除了 pre 或 code 這樣的標(biāo)簽不能刪除，其它的都可以
           代碼優(yōu)化
           例如說(shuō)html別嵌套太多層，否則加重頁(yè)面layout的壓力
           CSS的選擇器別寫(xiě)太復(fù)雜，不然匹配的計(jì)算量會(huì)比較大
           JS的濫用閉包，閉包會(huì)加深作用域鏈，加長(zhǎng)變量查找的時(shí)間
           6. 利用HTML5或CSS3
           代替圖片 或 LocalStorage、 Offline Storage 
          創(chuàng) 前端二牛
          雖然執(zhí)行環(huán)境的類(lèi)型總共只有兩種——全局和局部（函數(shù)），但還是有辦法來(lái)延長(zhǎng)作用域鏈的，這么說(shuō)是因?yàn)橛行┱Z(yǔ)句可以在作用域鏈的前端臨時(shí)增加一個(gè)變量對(duì)象，該變量對(duì)象會(huì)在代碼執(zhí)行后被移除。在兩種情況下會(huì)發(fā)生這種現(xiàn)象。具體來(lái)說(shuō)，就是當(dāng)執(zhí)行流進(jìn)入下列任何語(yǔ)句時(shí)，作用域鏈就會(huì)得到加長(zhǎng)：
          1. try-catch語(yǔ)句的catch塊。
          2. with語(yǔ)句。
          這兩個(gè)語(yǔ)句都會(huì)在作用域鏈的前端添加一個(gè)變量對(duì)象。對(duì) with語(yǔ)句來(lái)說(shuō)，會(huì)將指定的對(duì)象添加到作用域鏈中。對(duì) catch語(yǔ)句來(lái)說(shuō)，會(huì)創(chuàng)建一個(gè)新的變量對(duì)象，其中包含的是被拋出的錯(cuò)誤對(duì)象的聲明。下面看一個(gè)例子：
          1. var
          2.  mother 
          3. =
          4.  
          5. {
          6.  name
          7. :
          8.  
          9. 'Rose'
          10. ,
          11.  age
          12. :
          13.  
          14. 30
          15. }
          16. function
          17.  father
          18. (){
          19.  
          20. var
          21.  fName 
          22. =
          23.  
          24. 'Jack'
          25. ;
          26.  
          27. var
          28.  name 
          29. =
          30.  
          31. '張三'
          32. ;
          33.  
          34. function
          35.  son
          36. (){
          37.  
          38. var
          39.  sName 
          40. =
          41.  
          42. 'son'
          43. ;
          44.  
          45. with
          46. (
          47. mother
          48. ){
          49.  
          50. var
          51.  word 
          52. =
          53.  
          54. 'my name: '
          55.  
          56. +
          57.  sName 
          58. +
          59.  
          60. ', father name: '
          61.  
          62. +
          63.  fName 
          64. +
          65.  
          66. ', mother name: '
          67.  
          68. +
          69.  name 
          70. +
          71.  
          72. ", mother age: "
          73.  
          74. +
          75.  age
          76. ;
          77.  
          78. }
          79.  console
          80. .
          81. log
          82. (
          83. word
          84. );
          85. //my name: son, father name: Jack, mother name: Rose, mother age: 30
          86.  
          87. }
          88.  son
          89. ();
          90. }
          91. father
          92. ();
          首先聲明一個(gè)對(duì)象 mother，包含兩個(gè)屬性： name和 age，然后定義一個(gè)函數(shù) father，里面聲明兩個(gè)變量： fName和 name，又聲明一個(gè)函數(shù) son， son中定義了一個(gè)變量 sName和一個(gè) with語(yǔ)句塊。我們來(lái)看打印的結(jié)果， mother name為對(duì)象 mother中的 Rose，而不是函數(shù) father中的 張三，這就是 with語(yǔ)句在起作用。
          在Chrome中調(diào)試可以發(fā)現(xiàn)，如下圖：
          代碼執(zhí)行到19行 with語(yǔ)句塊中時(shí)，作用域鏈的前端增加了一個(gè) WithBlock作用域，根據(jù)作用域鏈搜索機(jī)制，此時(shí)的 name應(yīng)該是 Rose。
          再看下圖：
          代碼執(zhí)行到22行， with語(yǔ)句塊執(zhí)行結(jié)束， with作用域從作用域鏈中移除， with語(yǔ)句塊中聲明的變量綁定在 with所在的函數(shù)中，所以 console.log(word)可以正常輸出 word。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
一区二区三区四区精品|
国产suv精品一区二区33|
性色AV 一区二区三区|
2014AV天堂无码一区|
综合一区自拍亚洲综合图区|
国产凹凸在线一区二区|
色欲AV无码一区二区三区|
人妻视频一区二区三区免费|
国产精品视频一区二区三区无码|
日本精品少妇一区二区三区|
亚洲av成人一区二区三区观看在线|
国产在线精品一区二区不卡|
精品乱子伦一区二区三区高清免费播放
|
无码人妻精品一区二区三区99仓本
|
精品国产日韩亚洲一区在线|
久久国产精品一区免费下载
|
成人欧美一区二区三区在线视频|
精品无码一区二区三区亚洲桃色|
国产午夜精品一区理论片飘花|
久久一区二区三区99|
国产精品区一区二区三|
日本精品视频一区二区|
成人精品一区久久久久|
免费一区二区三区在线视频|
色一情一乱一伦一区二区三区日本|
国产精品一区二区香蕉|
国产在线精品观看一区|
国产一区二区三区在线|
一区二区三区在线观看视频|
日韩一区二区三区视频久久|
精品一区二区三区在线播放|
秋霞鲁丝片一区二区三区|
一区二区三区在线看|
手机看片福利一区二区三区|
国产AV一区二区三区无码野战|
亚洲制服丝袜一区二区三区|
亚洲一区二区三区四区视频
|
亚洲码一区二区三区|
亚洲一区二区三区丝袜|
四虎成人精品一区二区免费网站|
激情爆乳一区二区三区|