under the construction of adaptive websites px,em,rem the difference
due to the popularity of multi-terminal browsing methods, adaptive website display is particularly important, but the width and font size settings of adaptive website construction ( px、em、rem） it is indeed different from traditional websites. today, the editor of liyang network will focus on the differences between them:
PX
px pixels ( Pixel）。 relative length unit. pixels px it is relative to the screen resolution of the monitor.
PX features
1. IE can't adjust those usage px font size as unit;
2. the reason why most foreign websites can be adjusted is that they are used em or rem as font unit;
3. Firefox able to adjust px and em，rem， but more than 96% of chinese netizens use IE browser (or kernel )。
EM
em is a unit of relative length. font size relative to the text in the current object. if the font size of the text in the line is not artificially set, it will be relative to the browser's default font size.
EM features
1. em the value of the
2. em will inherit the font size of the parent element.
note: the default font height of any browser is 16 px。 all unadjusted browsers comply with:
1em=16px。 then 12 px=0.75em,10px=0.625em。 to simplify font-size the conversion needs to be css in-house body declare in the selector Font-size=62.5%，this makes em the value becomes
16px*62.5%=10px, this is 12 px=1.2em, 10px=1em,
that is to say, just put your original one px divide the value by 10 and then change it em just be a unit.
so we're writing CSS when it comes to two things:
1. body declare in the selector Font-size=62.5%；
2. put your original one px divide the value by 10 and then change it em as a unit;
3. recalculate those fonts that are enlarged em value. avoid repeated declarations of font size.
that is to avoid 1.2 * 1.2= 1.44phenomenon. for example, you are in content the font size is 1.2 em， then declare p the font size can only be 1 em， instead of 1.2 em, because of this em not that em， it's inherited by content the font is high and becomes 1 em=12px。
REM
rem yes CSS3 a new relative unit ( root
em， root em）， this unit has attracted widespread attention. this unit is em what's the difference? the difference is in use rem when setting the font size for an element, it is still relatively small, but the relative one is only HTML root element. this unit can be said to combine the advantages of relative size and absolute size. through it, it can not only adjust all font sizes proportionally by modifying the root element, but also avoid the chain reaction of layer by layer compounding of font size. currently, in addition to IE8 all browsers have supported it except for earlier versions rem。 for browsers that do not support it, the response method is also very simple, which is to write an additional declaration of absolute units. these browsers will be ignored rem set font size. here is an example:
p {font-size:14px; font-size:.875rem;}note: the choice of font unit is mainly determined by your project. if your user base uses the latest version of the browser, it is recommended to use it. rem， if compatibility is to be considered, use px, or use both.
px and rem the choice?
for those who only need to adapt to a small number of mobile phone devices and the resolution has little impact on the page, use px just do it.
for mobile devices that need to be adapted to rem， for example, only need to adapt iPhone and iPad devices with quite different resolutions.
the above is the "adaptive website construction shared by suyou network and everyone px,em,rem ", thank you very much for your patience to read this article. we will provide you with more information on reference or learning communication. we can also provide you with:enterprise website construction, website imitation, website copying, imitation site, foreign trade website construction, foreign trade website construction, company official website productionfor services, our company serves customers with the service concept of "integrity, professionalism, pragmatism and innovation". if you need cooperation, please scan the code to consult, and we will serve you sincerely.
TAG label:
