<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站| 亚洲熟妇久久精品| 99精品免费视品| 国产偷国产偷亚洲高清日韩| 搜日本一区二区三区免费高清视频 | xxxx日本免费| 亚洲1234区乱码| 在线免费视频一区二区| 亚洲七久久之综合七久久| 黄网址在线永久免费观看| AV激情亚洲男人的天堂国语| 国产成人精品免费视频大全五级| 特级无码毛片免费视频| 久久亚洲AV永久无码精品| 一级毛片免费观看不卡视频| 亚洲精品综合久久中文字幕| 午夜小视频免费观看| 特级aaaaaaaaa毛片免费视频| 国产亚洲精品激情都市| 无码专区AAAAAA免费视频| 亚洲六月丁香六月婷婷色伊人| 免费看www视频| 免费看一级一级人妻片| 久久精品国产亚洲AV久| 24小时在线免费视频| 亚洲日韩一中文字暮| 亚洲毛片不卡av在线播放一区| 国产综合免费精品久久久| 亚洲春色在线观看| 国产在线不卡免费播放| AAA日本高清在线播放免费观看| 亚洲熟妇无码爱v在线观看| 免费看国产精品麻豆| 成在人线av无码免费高潮喷水 | 久久亚洲国产精品一区二区| 亚洲啪啪免费视频| a高清免费毛片久久| 亚洲ts人妖网站| 国产亚洲精aa成人网站| 91免费国产在线观看| 一级一看免费完整版毛片|