Simple two-step blog Park support mobile phone display

Source: Internet
Author: User

Blog Park template is not compatible with mobile phone-side display, the reading experience is relatively poor. This article teaches you how to make your blog support mobile display in a few simple steps. Looking for a dead night, no one to browse your blog point in time, start it.

1. Add JS Code

In the background of the blog park under the "Settings" menu, there is a page of the first HTML code , where the JS code can also be effective, the following code copied the past:

<script>var content = ' width=device-width, initial-scale=1 user-scalable=no '; var viewport = document.createelement (' meta '); Viewport.setattribute (' name ', ' viewport '); Viewport.setattribute (' content ', content);d Ocument.head.appendChild (viewport); </script>

This code creates a <meta> tag and sets the appropriate viewport to render the page as a device width.

2. Add CSS Code

Or the "Settings" menu, there is a page custom CSS code , where you can customize your CSS. Since we want to write CSS specifically for the mobile phone, so we need to use the media query, all the CSS code is written in this block:

@media screen and (max-width:768px) {/    * custom CSS Rule */}

Because the different templates of the blog park may have different HTML structure, so there is not a common set of CSS style, so the specific CSS you have to write your own. What you need to write roughly includes the following:

    • Hide Sidebar and other elements that don't need to be displayed on your phone
    • Change the width of the layout element to a percentage, such as width:100%
    • Adjust font size to suit your phone's reading
    • Fine-Tune each element spacing

Finally, attached to my blog's mobile phone-side CSS style, for your reference:

@media screen and (max-width:768px){#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; }#header{Height:180px; }#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; }. Postbody{            }#blogTitle{ Left:0; }#mainContent. Postbody{width:100%; }. Post{padding:0 4%; }#header{background:URL (http://images.cnblogs.com/cnblogs_com/lvdabao/507840/o_face-monkey-128.png) top right no-repeat;background-size:46px; }. Topiclistfooter{width:100%;text-align:Center;padding:0;Height:40px; }. Topiclistfooter A:link{font-size:12px; }}

Simple two-step blog Park support mobile phone display

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.