{"id":2145,"date":"2023-09-01T08:52:15","date_gmt":"2023-09-01T01:52:15","guid":{"rendered":"https:\/\/dev.artru.io.vn\/?p=2145"},"modified":"2023-11-12T12:38:08","modified_gmt":"2023-11-12T05:38:08","slug":"cach-tao-font-size-responsive","status":"publish","type":"post","link":"https:\/\/artru.net\/en\/cach-tao-font-size-responsive\/","title":{"rendered":"How to make font-size Responsive"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Use the unit &quot;REM&quot;<\/h2>\n\n\n\n<p>Use units <code data-no-translation=\"\" data-no-auto-translation=\"\">REM<\/code> for tags <code data-no-translation=\"\" data-no-auto-translation=\"\">p, h1-h6, a<\/code> Helps you save time when editing font sizes in bulk.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">:root {\n    font-size: 16px;\n}\n\nh1 {\n    font-size: 2rem;\n}<\/code><\/pre>\n\n\n\n<p>When I change <code data-no-translation=\"\" data-no-auto-translation=\"\">font-size<\/code> original is card <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;h1&gt;<\/code> also change accordingly.<\/p>\n\n\n\n<p>Suppose:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">:root{font-size: 16px;}<\/code>  then card <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;h1&gt;<\/code> will have size <code data-no-translation=\"\" data-no-auto-translation=\"\">32px<\/code>.<\/li>\n\n\n\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">:root{font-size: 20px;}<\/code> then card <code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;h1&gt;<\/code> will have size <code data-no-translation=\"\" data-no-auto-translation=\"\">40px<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"BavzZbp\" data-user=\"artrublog\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/artrublog\/pen\/BavzZbp\" target=\"_blank\" rel=\"noopener\">\n  Ex: REM UNIT font-size<\/a> by ARTRU (<a href=\"https:\/\/codepen.io\/artrublog\" target=\"_blank\" rel=\"noopener\">@artrublog<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Replace unit &quot;px&quot; with &quot;%&quot;<\/h2>\n\n\n\n<p>This you can refer to, not necessarily converted into units <code data-no-translation=\"\" data-no-auto-translation=\"\">%<\/code>.<\/p>\n\n\n\n<p>When <code data-no-translation=\"\" data-no-auto-translation=\"\">font-size<\/code> is fixed with <code data-no-translation=\"\" data-no-auto-translation=\"\">px<\/code>. It will help the website layout not to move even if the user sets the font to be larger or smaller than the default (16px is the default for all devices), especially on mobile devices.<\/p>\n\n\n\n<p>If you want the website to respect the user&#039;s font-size. You can use the % unit instead.<\/p>\n\n\n\n<p>Specifically here is <code data-no-translation=\"\" data-no-auto-translation=\"\">62.5% = 10px<\/code> when the user sets the default font size.<\/p>\n\n\n\n<p>Based on that ratio I use <code data-no-translation=\"\" data-no-auto-translation=\"\">6.25% = 1px<\/code> to combine units <code data-no-translation=\"\" data-no-auto-translation=\"\">REM<\/code> easier.<\/p>\n\n\n\n<p>For example I want tags &lt;h1&gt; If the font size is 32px then:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">:root{font-size: <code>62.5%<\/code>;}<\/code>  then card <code data-no-translation=\"\" data-no-auto-translation=\"\">h1{font-size: 3.2rem;}<\/code>.<\/li>\n\n\n\n<li><code data-no-translation=\"\" data-no-auto-translation=\"\">:root{font-size: <code>6.25%<\/code>;}<\/code> then card <code data-no-translation=\"\" data-no-auto-translation=\"\">h1{font-size: 32rem;}<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"JjwKygb\" data-user=\"artrublog\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/artrublog\/pen\/JjwKygb\" target=\"_blank\" rel=\"noopener\">\n  Ex: % UNIT font-size<\/a> by ARTRU (<a href=\"https:\/\/codepen.io\/artrublog\" target=\"_blank\" rel=\"noopener\">@artrublog<\/a>) on <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Create font-size Reponsize<\/h2>\n\n\n\n<p>Creating font-size Responsive means the font size will change according to each screen size.<\/p>\n\n\n\n<p>You can hard set the font-size for each device width.<\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, consectetur quas incidunt quibusdam deserunt cum non,\n  quasi facere labore repudiandae, mollitia harum dolores sed ad voluptatem adipisci pariatur ex inventore.&lt;\/p&gt;\n&lt;style&gt;\n  \/* Mobile *\/\n  @media(max-width: 479px) {\n    body {\n      font-size: 16px;\n    }\n  }\n\n  \/* Tablet *\/\n  @media(min-width: 480px) and (max-width: 1024px) {\n    body {\n      font-size: 26px;\n    }\n  }\n\n  \/* Desktop *\/\n  @media(min-width: 1025px) {\n    body {\n      font-size: 40px;\n    }\n  }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"963\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/09\/Media-viewport-font-size.avif\" alt=\"Media viewport font-size\" class=\"wp-image-2191\"\/><figcaption class=\"wp-element-caption\">Media viewport font-size<\/figcaption><\/figure>\n<\/div>\n\n\n<p>However, the above method will not be flexible because there are currently many devices with many different sizes.<\/p>\n\n\n\n<p>I use functions <code data-no-translation=\"\" data-no-auto-translation=\"\">calc<\/code> makes the code shorter and more maneuverable in scaling the screen.<\/p>\n\n\n\n<p>Let&#039;s visit the tool <a href=\"https:\/\/websemantics.uk\/tools\/fluid-responsive-property-calculator\/\" target=\"_blank\" rel=\"noreferrer noopener\">Fluid-responsive property calculator<\/a>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"699\" height=\"567\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/09\/Fluid-responsive-property-calculator.jpg\" alt=\"Fluid-responsive property calculator\" class=\"wp-image-2185\"\/><figcaption class=\"wp-element-caption\">Fluid-responsive property calculator<\/figcaption><\/figure>\n<\/div>\n\n\n<p>Item <strong>Units<\/strong> you can choose the unit you want. I will use it <code data-no-translation=\"\" data-no-auto-translation=\"\">px<\/code>.<\/p>\n\n\n\n<p>Item <strong>Range<\/strong> is the font-size margin as in the example I set <code data-no-translation=\"\" data-no-auto-translation=\"\">16px-40px<\/code>.<\/p>\n\n\n\n<p>Item <strong>Viewport<\/strong> is the screen width size range (width). I&#039;ll put the word <code data-no-translation=\"\" data-no-auto-translation=\"\">360px-1024px<\/code>.<\/p>\n\n\n\n<p>In the section <strong>CSS method<\/strong> you select the box <strong>Clamp<\/strong>. Then you just need to copy the CSS code created below.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code data-no-translation=\"\" data-no-auto-translation=\"\">&lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo, consectetur quas incidunt quibusdam deserunt cum non,\n  quasi facere labore repudiandae, mollitia harum dolores sed ad voluptatem adipisci pariatur ex inventore.&lt;\/p&gt;\n&lt;style&gt;\n  body {\n    font-size: clamp(16px, calc(1rem + ((1vw - 3.6px) * 3.6145)), 40px);\n  }\n&lt;\/style&gt;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"963\" src=\"https:\/\/cdn.artru.eu.org\/wp-content\/uploads\/2023\/09\/Responsive-font-size.avif\" alt=\"Responsive font-size\" class=\"wp-image-2192\"\/><figcaption class=\"wp-element-caption\">Responsive font-size<\/figcaption><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>S\u1eed d\u1ee5ng \u0111\u01a1n v\u1ecb \"REM\" S\u1eed d\u1ee5ng \u0111\u01a1n v\u1ecb REM cho c\u00e1c th\u1ebb p, h1-h6, a gi\u00fap b\u1ea1n ti\u1ebft ki\u1ec7m th\u1eddi gian khi ch\u1ec9nh s\u1eeda c\u1ee1 ch\u1eef h\u00e0ng lo\u1ea1t. V\u00ed [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2195,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[113],"tags":[],"class_list":["post-2145","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2145","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/comments?post=2145"}],"version-history":[{"count":0,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/posts\/2145\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media\/2195"}],"wp:attachment":[{"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/media?parent=2145"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/categories?post=2145"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/artru.net\/en\/wp-json\/wp\/v2\/tags?post=2145"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}