「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"

Article reprinted from :https://www.cnblogs.com/xiaozhumaopao/p/8260447.html


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 )

    from :http://www.cnblogs.com/TaigaCon/p/3551001.html This article references from http://wenku.baidu.com/link?url=ZPF0iSKzwLQg_ ...

  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 ...