国产欧美三级日韩_可以免费看日韩无码黄色电影_91九色成人在线_亚洲伊人精品久久久久_国产精选视频一区二区三区不卡播放无码_影音先锋在线资源观看男士天堂影院网站_黄色软件免费网站_人妻中文字幕无码久久αV_欧美亚洲国产成人一区二区_欧美日韩一级特黄大片免色

前言：

           最近在一家新的公司開發(fā)一個pc產(chǎn)品，所有東西都是我一個人搞，時間精力有限，不單獨弄一套手機頁面，但為了使我的產(chǎn)品能夠讓顧客的體驗感更好點，我采用適配移動端頁面的辦法。

          一、主要的思路

         PC設(shè)計成max-width=980px頁面，min-width=700px。頁面采用px+百分比，通過viewport設(shè)置縮放成滿屏，并且允許用戶縮放，最后采用媒體查詢修改部分樣式。修改的樣式主要為，布局尺寸，字體大小等等。

         二、具體操作

         1)  首先頁面從980寬度自動變到到700，在設(shè)計頁面的時候，就要考慮好，盡量不需要媒體查詢補充修改樣式，這二個尺寸之間還是很好適配的。發(fā)一個viewport的設(shè)置如下： 

;(function(){

var phoneWidth = parseInt(window.screen.width); //手機屏幕寬,比如320

var phoneScale = phoneWidth/700; //屏幕/頁面尺寸 ,指定初始化比率為此，可以把頁面縮放至完整屏幕

document.write('<meta name="viewport" content="width=700,user-scalable=yes,'+

'initial-scale='+phoneScale +',maximum-scale=0.77">'); //頁面內(nèi)容可適當放大，超過手機的視口。

})();

        2) 從980px到700px的時候，文字類的容易排版，表格類的不進行處理，一般自動縮放的時候，排版會亂，對于適配不了的

我主要做了一個操作就是，讓有些元素移動端不顯示，表格的某些td不進行顯示。 

body{min-width:700px;} 

.w1000 {max-width: 990px; margin:0 auto;}

.responsive{display: block;height: auto;max-width:100%;}  //圖片的響應(yīng)式

.mo_show{display: none;} //塊元素手機端顯示

.mo_show_line{display: none;} //行元素手機端顯示

.mo_show_td{display: none;}  //td元素手機端顯示

@media screen and (max-width:768px){

.mo_hide{display: none;}  //手機端隱藏

.mo_show{display: block;}

.mo_show_td{display: table-cell;}

.mo_show_line{display: inline;}

}

//使用方法

比如一個復合跨行的table，讓一級th7個變3個，二級th的對應(yīng)幾個使用mo_hide樣式即可

<th colspan="7" class="mo_hide"></th><th colspan="3" class="mo_show_td"></th>

       3) 700px正常的頁面，再用viewport整體縮放到300+px的時候，這個時候主要處理的就是部分尺寸，和全部的字體大小。有些字體我采用整體適配的方式處理。

/**字體適配相關(guān)*/

.mo_font13{font-size: 13px;}

.mo_font15{font-size: 15px;}

.mo_font17{font-size: 17px;}

.mo_font18{font-size: 18px;}

@media screen and (max-width:768px){

body,input,select,textarea,button{font-size:18px;}

.mo_font15{font-size:17px;}

.mo_font13{font-size: 15px;}

.mo_font17{font-size: 19px;}

.mo_font18{font-size: 21px;}

}

/**基礎(chǔ)p標簽**/

.base_p{font-size:15px;line-height:30px;text-align:left;text-indent: 24px;text-align: justify;}

@media screen and (max-width:768px){.base_p{font-size:20px;line-height:34px;}}

4、頁面效果

   PC端：

手機端：

三、結(jié)語

      移動端只要想適配還是很容易的，這個項目媒體查詢改的樣式不超過30%，我這個頁面功能實在太緊湊了點，如果能640px縮放至手機寬的話，再加適配的話，可能效果就更好點。

--------------------- 

作者：搬磚突擊隊 

來源：CSDN 

原文：https://blog.csdn.net/shuixiou1/article/details/83043859 

版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！