网页自适配手机端
博客在手机打开一直不能适配，手机上访问的体验很不好。今天把博客的大部分页面都加了自适配手机端，只要修改每个页面的css 即可。
之前大概知道怎么去改，但是页面太多实在觉得麻烦，就一直没有去改。当初做博客的时候也没有考虑到手机访问的重要性，所以现在虽然能改，但是也是缝缝补补。 一直想换一套模板的，又觉得要做的实在太多了。不过要想在手机上完美体验还是需要重新做一套前端了，现在先这样用着。
之前呢，考虑到很多人通过链接在手机上打开了我的博客，为了让他们访问加了个电脑访问的提示。通过js判断是否手机打开，如果是就弹窗提示。
代码语言：javascript复制效果：
这样肯定是不行的，还是得改css。html+css完全是靠在大学时老师教的那些撑着，一开始觉得完全够用，后面发现很多东西老师没有教过。接触的越多发现要学的就越多，虽然是一个后端开发，但是该学的还是得学。css最烦的就是调来调去还差点的，特别是屏幕宽度，就很无语~
手机适配的话先加个meta viewport。移动端的布局不同于pc端，首先我们要知道在移动端中，css中的1px并不等于物理上的1px，因为手机屏幕的分辨率已经越来越高，高像素但是屏幕尺寸却没有发生太大变化，那就意味着一个物理像素点实际上塞入了好几个像素。头部加上viewport 并设置一些默认属性。
代码语言：javascript复制然后就是css判断了，使用@media来判断屏幕宽度，再调整响应模块的scc。
代码语言：javascript复制/**手机适配**/
@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：viewport 深入理解
media：CSS3@media查询
没有适配手机之前的效果
首页：
详情页：
做了适配之后的效果
首页：
详情页：