亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

前言：

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

          一、主要的思路

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

         二、具體操作

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

;(function(){

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

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

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

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

})();

        2) 從980px到700px的時(shí)候，文字類(lèi)的容易排版，表格類(lèi)的不進(jìn)行處理，一般自動(dòng)縮放的時(shí)候，排版會(huì)亂，對(duì)于適配不了的

我主要做了一個(gè)操作就是，讓有些元素移動(dòng)端不顯示，表格的某些td不進(jìn)行顯示。 

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;} //塊元素手機(jī)端顯示

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

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

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

.mo_hide{display: none;}  //手機(jī)端隱藏

.mo_show{display: block;}

.mo_show_td{display: table-cell;}

.mo_show_line{display: inline;}

}

//使用方法

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

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

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

/**字體適配相關(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標(biāo)簽**/

.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、頁(yè)面效果

   PC端：

手機(jī)端：

三、結(jié)語(yǔ)

      移動(dòng)端只要想適配還是很容易的，這個(gè)項(xiàng)目媒體查詢改的樣式不超過(guò)30%，我這個(gè)頁(yè)面功能實(shí)在太緊湊了點(diǎn)，如果能640px縮放至手機(jī)寬的話，再加適配的話，可能效果就更好點(diǎn)。

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

作者：搬磚突擊隊(duì) 

來(lái)源：CSDN 

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

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