In the past, we used the "hard coded" font size (pixel unit px) to set text sizes, but this method may cause the text to look comfortable on a large monitor, and it becomes illegible on the small screen of the mobile device.
1, use EM to set text size
The percentages are the same as the EM results, and the text is scaled in relation to the default text size for the browser. For example: The text size set to 110% or 1.1em, the result is more than the normal text does not apply the style of a large 10%.
The usual way to implement a responsive layout is to set the base text of the page to 100%, and then enlarge or shrink the text in the other elements using the EM unit.
body{
font-size:100%;
}
p {
Font-size:0.9em;
}
H1 {
Font-size:2em;
}
2, using EM to set the outer margin, the inner margin
In addition to text using EM, it is also best to use em instead of pixels in the layout of the border, the outer margin, and the inner margin. With EM, the space occupied by these details is scaled according to the size of the text.
For example, the following sample: The left and right two columns are two <div> nested layout, the internal <div> is used to add white space around the current column content, so that does not affect the overall two-column layout of the ratio scaling.
<!doctype html>
<meta charset= "UTF-8" >
<title>111cn.net</title>
<style>
* {
margin:0px;
padding:0px;
}
body{
font-size:100%;
}
p {
Font-size:0.9em;
}
H1 {
Font-size:2em;
}
. leftcolumn {
width:33.3%;
Float:left;
Background-color:yellow;
}
. rightcolumn {
width:66.7%;
Float:left;
Background-color: #7FFF9B;
}
. colomncontent {
Border:0.07em solid Gray;
Margin:0.3em;
Padding:0.2em 0.3em 0.4em 0.4em;
}
</style>
<body>
<div class= "Leftcolumn" >
<div class= "Colomncontent" >
<p> Welcome to visit 111cn.net</p>
</div>
</div>
<div class= "Rightcolumn" >
<div class= "Colomncontent" >
<p> Welcome to visit 111cn.net</p>
</div>
</div>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
