<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        博客兼容手機瀏覽-快樂八哥

        來源:懂視網 責編:小采 時間:2020-11-27 16:43:29
        文檔

        博客兼容手機瀏覽-快樂八哥

        博客兼容手機瀏覽-快樂八哥:一、動手實踐、改造博客園 先看一下博客園官方博客的手機版本,在Chrome里面F12,使用移動模式。 今天看博客,看到呂大豹的文章:簡單兩步讓博客園支持手機端顯示, 之前自己把博客從博客園遷移到了github的issu中,也是考慮到博客園的博客不能很好的支持手
        推薦度:
        導讀博客兼容手機瀏覽-快樂八哥:一、動手實踐、改造博客園 先看一下博客園官方博客的手機版本,在Chrome里面F12,使用移動模式。 今天看博客,看到呂大豹的文章:簡單兩步讓博客園支持手機端顯示, 之前自己把博客從博客園遷移到了github的issu中,也是考慮到博客園的博客不能很好的支持手
        一、動手實踐、改造博客園

        先看一下博客園官方博客的手機版本,在Chrome里面F12,使用移動模式。

        image

        今天看博客,看到呂大豹的文章:簡單兩步讓博客園支持手機端顯示, 之前自己把博客從博客園遷移到了github的issu中,也是考慮到博客園的博客不能很好的支持手機端瀏覽和評論。今天根據簡單兩步,確實把自己的博客能兼容手機顯示了,記錄一下。

        我的博客模板是:http://www.cnblogs.com/SkinUser.aspx?SkinName=SimpleBlue

        1.添加js代碼,參照呂的博客文章

        2.添加CSS代碼。我的博客模板和呂的不同,所以我直接復制了CSS代碼,也做了一些改動。

        1. 我的博客是左右兩欄,為了分欄,右側的#mainContent有一個marin-left:300px的樣式,所以要去掉。
        2. a鏈接有時太長,沒有換行顯示,需要加一段代碼。 a{word-wrap: break-word;}
        3. 文章詳細頁,設計到廣告、評論框和分享panel使用了固定寬度,同一改成了{width:100%;},而且對廣告還添加了{overflow:hidden}。博客園官方后期可以考慮把固定寬度的廣告都換成響應式的廣告。
        body {
         font-family: "微軟雅黑",Arial,sans-serif;
         font-size: 14px !important;
        }
        div#license {
         background-color: #f8f8ee;
         border: solid 1px #e8e7d0;
         padding: 5px 10px 0px 10px;
         min-height: 10px;
         margin-bottom: 10px;
         margin-top: 10px;
         color: #666666;
        }
        .post {
         background-color: #fff;
         border: 1px solid #F5F5F5;
        }
        #cnblogs_post_body p {
         font-family: "微軟雅黑",Arial,sans-serif;
         font-size: 16px !important;
        }
        /*支持手機樣式*/
        @media screen and (max-width: 768px) {
         #mainContent {
         margin-left: 0
         }
         a {
         word-wrap: break-word;
         }
         #main, #mainContent {
         width: 100%;
         }
         #sideBar, body > a, #navList, #navigator, .postDesc a, #homepage_top_pager {
         display: none;
         }
         #blogTitle a {
         font-size: 30px;
         }
         #blogTitle h2 {
         font-size: 16px;
         }
         #home {
         background-image: none;
         }
         .postTitle a {
         font-size: 22px;
         }
         .postCon, .postCon a {
         font-size: 16px;
         }
         .day {
         margin: 0 2%;
         }
         .postCon a {
         padding-left: 0;
         }
         .postDesc {
         width: 100%;
         font-size: 12px;
         }
         #home {
         background-color: #68BCCA;
         }
         #mainContent .forFlow {
         margin: 4px 0 0 0;
         }
         #blogTitle {
         left: 0;
         }
         #mainContent .postBody {
         width: 100%;
         }
         .post {
         padding: 0 4%;
         }
         #header {
         background-size: 46px;
         }
         .topicListFooter {
         width: 100%;
         text-align: center;
         padding: 0;
         height: 40px;
         }
         .topicListFooter a:link {
         font-size: 12px;
         }
        /*文章詳細頁樣式*/
         #green_channel {
         width: 100%;
         }
         .c_ad_block {
         width: 100%;
         overflow: hidden;
         }
         #tbCommentAuthor,.commentbox_title,#tbCommentBody {
         width: 100%;
         }
        }

        二、效果展示

        首頁顯示效果:

        image

        文章詳細頁-分享模塊:

        image

        文章詳細頁-評論模塊:

        image

        文章詳細頁-廣告:

        image

        三、總結

        通過簡單的2個步驟,就實現了博客園能在pc和mobile設備下,正常訪問了。后續考慮看看是否有從博客園搬遷到github上的必要,因為本身博客園的用戶訪問量相對較多,有github賬戶的開發者還是相對較少,而且之前積累博客園相關的經驗。技術改變生活。博客園官方是否可以考慮給所有的主題模板做一個響應式設計改造,或者主題模板的制作者,上傳模板上來,就做好響應式設計。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        博客兼容手機瀏覽-快樂八哥

        博客兼容手機瀏覽-快樂八哥:一、動手實踐、改造博客園 先看一下博客園官方博客的手機版本,在Chrome里面F12,使用移動模式。 今天看博客,看到呂大豹的文章:簡單兩步讓博客園支持手機端顯示, 之前自己把博客從博客園遷移到了github的issu中,也是考慮到博客園的博客不能很好的支持手
        推薦度:
        標簽: 手機 快樂 支持
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 亚洲AV无码专区国产乱码不卡| 亚洲国产另类久久久精品| 亚洲精品人成电影网| 免费网站观看WWW在线观看| 日韩亚洲精品福利| 亚洲国产精品精华液| 在线观看免费人成视频色9| 久久亚洲精品成人无码网站| 国产激情免费视频在线观看| 亚洲AV无码国产精品麻豆天美| 免费91麻豆精品国产自产在线观看| 国产亚洲精品看片在线观看 | 日本视频免费在线| 亚洲国产精品自在自线观看| 在线免费观看一级毛片| 亚洲国产欧美日韩精品一区二区三区| 最新69国产成人精品免费视频动漫| 亚洲夂夂婷婷色拍WW47| 四虎永久免费影院| 成在线人免费无码高潮喷水| 亚洲午夜无码久久久久| 暖暖日本免费中文字幕| 亚洲精品电影在线| 最近免费中文字幕视频高清在线看 | 免费无码黄动漫在线观看| jizzjizz亚洲日本少妇| 亚洲国产精品毛片av不卡在线 | 你是我的城池营垒免费看| 久久精品视频亚洲| 国产无人区码卡二卡三卡免费| 亚洲日韩精品无码专区加勒比☆ | 久久乐国产精品亚洲综合| 国产无遮挡无码视频免费软件| 久久亚洲AV成人无码电影| 女人毛片a级大学毛片免费| 朝桐光亚洲专区在线中文字幕| 亚洲国产香蕉人人爽成AV片久久 | 亚洲级αV无码毛片久久精品| 99re热精品视频国产免费| 亚洲综合激情五月色一区| 免费又黄又爽的视频|