前言：

           最近在一家新的公司开发一个pc产品，所有东西都是我一个人搞，时间精力有限，不单独弄一套手机页面，但为了使我的产品能够让顾客的体验感更好点，我采用适配移动端页面的办法。

          一、主要的思路

         PC设计成max-width=980px页面，min-width=700px。页面采用px+百分比，通过viewport设置缩放成满屏，并且允许用户缩放，最后采用媒体查询修改部分样式。修改的样式主要为，布局尺寸，字体大小等等。

         二、具体操作

         1)  首先页面从980宽度自动变到到700，在设计页面的时候，就要考虑好，尽量不需要媒体查询补充修改样式，这二个尺寸之间还是很好适配的。发一个viewport的设置如下： 

;(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">'); //页面内容可适当放大，超过手机的视口。

})();

        2) 从980px到700px的时候，文字类的容易排版，表格类的不进行处理，一般自动缩放的时候，排版会乱，对于适配不了的

我主要做了一个操作就是，让有些元素移动端不显示，表格的某些td不进行显示。 

body{min-width:700px;} 

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

.responsive{display: block;height: auto;max-width:100%;}  //图片的响应式

.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的对应几个使用mo_hide样式即可

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

       3) 700px正常的页面，再用viewport整体缩放到300+px的时候，这个时候主要处理的就是部分尺寸，和全部的字体大小。有些字体我采用整体适配的方式处理。

/**字体适配相关*/

.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;}

}

/**基础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端：

手机端：

三、结语

      移动端只要想适配还是很容易的，这个项目媒体查询改的样式不超过30%，我这个页面功能实在太紧凑了点，如果能640px缩放至手机宽的话，再加适配的话，可能效果就更好点。

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

作者：搬砖突击队 

来源：CSDN 

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

版权声明：本文为博主原创文章，转载请附上博文链接！