「rem」 It's the root element （root element,html） Font size of , From far away IE6 To version to Chrome They all have an appointment , The root element defaults to font-size All are 16px.

rem It's adapted through root elements , The root element in a web page refers to html, We set html The font size can be controlled rem Size （ the other one Relative units em（font size of the element） Is the unit of font size relative to the parent element .）,

therefore 1rem*16( This is html Of fontsize)=16px;

2rem*16=32px;

Want to let rem and px become 100 Times the relationship , namely 1rem*100=100px; be html The font size should be 100px;

So we usually js Make a judgment in the process ：

<script>
(function(){var a=document.documentElement.clientWidth||document.body.clientWidth;if(a>460){a=460}else{if(a<320){a=320}}document.documentElement.style.fontSize=(a/7.5)*1+"px"})();
</script>
• If it is 750px The design of , But cell phones are 375px The screen of ：

Corresponding 750 The design of                               Visual measurement 100px-->1rem

375 Screen phone （ yes 750 Half of ）   The page is displayed as   50px-->1rem

therefore 1rem and px The correspondence is 50 times about ： Screen width /7.5=375/7.5=50px ;

such 1rem*50=50px（50px yes 375 The length on the screen , amount to 750 Upper 100px）;

============================================================

• If it is 375px The design of , The cell phone is 375px The screen of ：

Corresponding 375 The design of                               Visual measurement 100px-->1rem

375 Screen phone                               The page is displayed as 100px-->1rem

therefore 1rem and px The correspondence is 100 times about ：  （ Screen width /7.5）*2=（375/7.5）*2=100px ;

such 1rem*100=100px（100px yes 375 The length on the screen , amount to 350 Upper 100px）;

============================================================

in summary , about 750 The design of ,375 My mobile phone and design draft are 50% The relationship between , So on the design draft 100px,

• Corresponding 375 On the phone 50px; That is to say 1rem Corresponding 50px;
document.documentElement.style.fontSize=(a/7.5)*1+"px"
• about 375 The design of ,375 My mobile phone and design draft are 100% The relationship between , So on the design draft 100px,

Corresponding 375 On the phone 100px; That is to say 1rem Corresponding 100px;

document.documentElement.style.fontSize=(a/7.5)*2+"px"

## rem How to calculate （ Reprint ） More articles about

1. Rem And Px Transformation [ Reprint ]

original text :http://www.w3cplus.com/preprocessor/sass-px-to-rem-with-mixin-and-function.html rem yes CSS3 A new unit added to ...

2. （ Taobao has unlimited adaptation ） Mobile terminal rem Detailed layout （ Reprint is not original ）

From Netease and Taobao font-size Thinking about front-end design draft and workflow In this paper, combined with their own analysis of Netease and Taobao mobile home page html Element font-size Thinking and learning of this attribute , Discuss html5 The size of the design draft and the collaborative process between the front end and the design ...

3. Using Monte Carlo (Monte Carlo) Method to calculate π value [ Reprint ]

Part reprinted from :https://blog.csdn.net/daniel960601/article/details/79121055 PI π It's an irrational number , There is no exact formula to calculate π value ,π Our calculation can only ...

4. Fluent Batch processing --windows Calculation of the next multiple tasks  【 Reprint 】

Reprinted from http://jingcao830828.blog.163.com/blog/static/10320833620103633624506/ 1. Continuous computation of multi tasks in the same dimension For engineering applications , Calculation accuracy ...

5. rem How to calculate

「rem」 It's the root element (root element,html) Font size of , From far away IE6 To version to Chrome They all have an appointment , The root element defaults to font-size All are 16px. rem It's done through the root element ...

6. Why? GPU Can be used in scientific computing 【 Reprint 】

from :https://blog.csdn.net/xihuanyuye/article/details/81178352 https://www.zhihu.com/question/35063258 ...

7. h.264 Of POC Calculation （ Reprint ）

8. Reprint an article CSS3 Of calc() Use

calc() For all of you , Maybe it's strange , I don't believe it calc() yes css Part of . Because it looks like a function , If it's a function, why does it appear in CSS What about China? ? This also makes me puzzled , Today, a colleague told me , say CSS3 There is a property in ...

9. Sass Basics ——Rem And Px Transformation

rem yes CSS3 A new unit value added in , He and em The unit is the same , It's all a relative unit . The difference is em Is relative to the parent element of the element font-size Calculate :rem Is relative to the root element html Of font-size Calculate . Such a ...

## Random recommendation

1. hdu 5780 gcd

The question : Given $x, n$ Satisfy $1 \leq x, n \leq 1000000$, seek $\sum{(x^a-1,x^b-1)}$ Yes $1e9+7$ The value after taking the mold , among $1 \leq a, b \leq n$. ...

2. EndPoint Detailed explanation

EndPoint Detailed explanation EndPoint Mainly used to expose some SpringMvc Information about internal operations , Usually by SpringMvc Request address to get related information . Such as /health Get health check information . Simple unit testing @Test ...

3. HDU 3943 K-th Nya Number（ digit DP）

Topic link :http://acm.hdu.edu.cn/showproblem.php?pid=3943 The main idea of the topic : Find the interval (P,Q] Find No K A number that satisfies the condition , If the number contains X individual 4 and Y individual 7 Samp ...

4. spring in bean Design mode of

The default is singleton . If you don't want a singleton, you need the following configuration : <bean id="user" class="..." singleton="false" ...

5. SQLSERVER PRINT The newline of a statement

original text :SQLSERVER PRINT The newline of a statement SQLSERVER  PRINT The newline of a statement Want to be in the output of PRINT A new line in a sentence , You can do this /* SQL Wrap of tabs CHAR(9) A newline CHAR( ...

6. SSM —— Annotation analysis

@Component It's all affected by Spring  A generic form of management components ,@Component Annotations can be placed on the head of a class ,@Component It is not recommended to use . @Controller adopt @Controller Note that this class is not ...

7. react Bind click events and modify property values for buttons

Be careful :1. The event name is given by react Provide , So the event name is capitalized . such as onClick,onMouseOver. 2. The handler provided for the event , The format must be onClick={function}, No parentheses . 3. Tying ...

8. Nodejs build wss The server

use first OpenSSL Create a self-signed certificate : # Generate private key key file openssl genrsa > /path/to/private.pem // # Generated from private key file CSR Certificate signature openssl ...

9. Mid year summing up conference -- Summary study notes , Technology Department IT How to write the Department's mid year summary report

How to organize the mid year summary meeting 1. Inform every employee , Sum up my half year work ( How many days in advance , As of ) 2. Venue layout 3. Department leaders summarize 4. Halftime , Or show , Group photo, etc 5. To commend 6. communication ( carry ...

10. windos or linux in which command View the path of the current command to be executed

whereis Used to view the absolute path of a command or file , and which Used to view the path of the current command to be executed . Here is an example . Join your linux Multiple versions of java. If you go straight to the command line ...