Home > Developer > Mobile Develop

Mobile page REM Layout

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Mobile phone page Design General size is 640, but, mobile phone screen size is really uncertain, so, how to make the phone to adapt to all mobile page?
The general solution has two types, REM layout and percent layout. I have tried both of these options, so it is now more recommended to use the REM layout to make mobile pages;

The compatibility of REM layouts:
Mozilla Firefox 3.6+, Apple Safari 5+, Google Chrome, ie9+ and opera11+, IE6-IE8 or don't use REM
But now the general mobile phone browser, generally can not go directly to the browser of IE kernel.

The calculation formula of REM
Example: HTML settings font-size:16px 1rem = 16px
So 640px = 640/16 =40rem

Personal advice set to 100px convenient calculation

First, the HTML for the page is defined as a 100px
html{font-size:100px;} /* Set Basic rem*/

Then, the most core code is this section of the JS operation, according to the size of the page to control the underlying REM value;

Newfunction(){
 var_self = This;
_self.width = 640;//Set default maximum width
_self.fontsize = 100;//Default font Size
_self.widthproportion =function(){varp = (document.body&&document.body.clientwidth| | document.getElementsByTagName ("HTML") [0].offsetwidth]/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changepage =function(){
document.getElementsByTagName ("HTML") [0].setattribute ("Style", "Font-size:" +_self.widthproportion () *_ self.fontsize+ "px!important");
}
_self.changepage ();
Window.addeventlistener (' Resize ',function() {_self.changepage ();},false);
};

Demo

<!DOCTYPE HTML>
<HTML>
<Head>
<Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<MetaCharSet= "Utf-8">
<title>REM Basic layout</title>
<Scripttype= "Text/javascript">
Newfunction(){
var_self = This;
_self.width = 640;//Set default maximum width
_self.fontsize = 100;//Default font Size
_self.widthproportion =function(){varp = (document.body&&document.body.clientwidth| | document.getElementsByTagName ("HTML") [0].offsetwidth]/_self.width;return p>1?1:p<0.5?0.5:p;};
_self.changepage =function(){
document.getElementsByTagName ("HTML") [0].setattribute ("Style", "Font-size:" +_self.widthproportion () *_ self.fontsize+ "px!important");
}
_self.changepage ();
Window.addeventlistener (' Resize ',function() {_self.changepage ();},false);
};
</Script>
<styletype= "Text/css">
/*= = = Base style===*/
*{margin:0px;padding:0px;}
UL{List-style:None;}
. Wrap{Min-width:320px;Max-width:640px;width:100%;margin:0px Auto;; background:#2a6ace;font-family:' Microsoft Jas Black ', ' Helvetica Neue ', Tahoma, ' Hiragino sans GB ', Stheiti, ' Wenquanyi Micro hei ', \5fae\8f6f\96c5\9ed1,\5b8b\4f53 , Sans-serif;font-size:12px;}/*For mobile phone: Font size with em,1em=16px, default font size, maximum width 640*/

. Pro{width:6.2rem;margin:0px Auto;Padding-top:20px;Overflow:Hidden;}
. Clearfix:after{content:"";Height:0;Display:Block;Clear:both;}
. Clearfix{Zoom:1;}
. Pro UL{width:6.4rem;}
. Pro Li{width:3rem;Height:3.6rem;float: Left;margin:0 0.2rem 0.2rem 0;}
. Pro li. Box{width:3rem;Height:3rem;background:#ccc;}
. Pro Li P{font-size:0.24rem;Line-height:0.6rem;text-align:Center;}
</style>
</Head>
<Body>
<Divclass= "Wrap">
<Divclass= "Pro">
<ulclass= "Clearfix">
<Li><Divclass= "box"></Div><P>Block copy</P></Li>
<Li><Divclass= "box"></Div><P>Block copy</P></Li>
<Li><Divclass= "box"></Div><P>Block copy</P></Li>
<Li><Divclass= "box"></Div> <P>Block copy</P></Li>
<Li><Divclass= "box"></Div><P>Block copy</P></Li>
</ul>
</Div>
</Div>
</Body>
</HTML>

Mobile page REM Layout

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
one page website layout php page layout page layout software best page layout software php rem examples of web page layout patterns mobile web page emulator
Related Article
[Android Security] Dex File Format Analysis
Several ways iOS intercepts redirect requests (302)

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More