本文共 1898 字，大约阅读时间需要 6 分钟。

博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。

之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。 一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。

之前呢，考虑到很多人通过链接在手机上打开了我的博客，为了让他们访问加了个电脑访问的提示。通过js判断是否手机打开，如果是就弹窗提示。

   
        /* 手机打开提示 */     var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");     var browser = navigator.userAgent.toLowerCase();     var isMobile = false;     for (var i = 0; i < mobileAgent.length; i++) {         if (browser.indexOf(mobileAgent[i]) != -1) {             isMobile = true;             alert("本博客手机打开不适配，建议使用电脑访问效果最佳！点击确定继续使用手机浏览");             break;         }     }
   

效果：

这样肯定是不行的，还是得改css。html+css完全是靠在大学时老师教的那些撑着，一开始觉得完全够用，后面发现很多东西老师没有教过。接触的越多发现要学的就越多，虽然是一个后端开发，但是该学的还是得学。css最烦的就是调来调去还差点的，特别是屏幕宽度，就很无语~

手机适配的话先加个meta viewport。移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。头部加上viewport 并设置一些默认属性。

然后就是css判断了，使用@media来判断屏幕宽度，再调整响应模块的scc。

/**手机适配**/@media only screen and (max-width: 767px) {   header{width:100%}   .banner{width: 100%;height: 100px;}   .avatar{width: 80px;height: 80px;margin: 6px;}   .avatar a{padding-top: 59px;width: 80px;height: 80px;background-size: 80px 78px;}   .avatar a span{margin-top: 0px; padding-top: 0px; width: auto;height: auto;}.bloglist h3 {margin: 20px 0 10px 10px;}.bloglist figure {width:auto;margin-left: 4px;}.bloglist figure img {width: 90px;height: 60px;}.bloglist ul{width:64%}.dateview {width:100%;padding-left:4px;}.dateview span {margin: 0 3px;}.weixinnone,.thumbs{display: none}.right{width: 100%;margin-top: 22px}.right ul{width:64%;margin-left: 22px;}.weather{margin: 20px 50px;}.bloglinkli{display: block}footer{width:100%}}

参考下面两篇文章

viewport：

media：

没有适配手机之前的效果

首页：

详情页：

做了适配之后的效果

首页：

详情页：

转载地址：http://iqwxi.baihongyu.com/