search
HomeWeb Front-endHTML Tutorialrem在响应式布局中的应用_html/css_WEB-ITnose

rem/em/px/pt的基友关系

px
像素相对长度单位,相对于显示器屏幕分辨率而言

em
相对长度单位,根据其父元素来设置字体大小

pt
point,是印刷行业常用单位,等于1/72英寸

rem
CSS3新增的一个相对单位,是根据网页的跟元素(html)来设置字体大小

rem应用于适配

rem的特性同样适用于width和height,我们可以根据根元素的font-size值来改变元素的宽高值,由此我们应该可以联想到我们可以根据屏幕大小动态地给html设定不同的值,从而达到我们css样式中的适配效果。

rem的适配规则

1.选择基准
虽然我们所写出的页面要在不同的屏幕大小设备上运行,但是我们写页面的时候,必须要选择其中一种屏幕大小作为初始的基准,而这个基准的选择应该根据我们所拿到的视觉稿来决定,

2.rem数值计算
正常情况下rem的值默认为16px,这样在整个页面的css计算过程中太过繁琐。比如,现在有个30px宽度的元素,就得写成30/16rem。对于整个页面来说工作量还是挺大的。所以这里提供了俩种方法

  • 可以将html的font-size设置成100px
    这样设置,在写单位时直接将数值除以100在加上rem的单位就可以了。如果设计稿的字体是16px;我们就可以写成1.6rem。
  • 这里为什么不用10?
    因为google等浏览器对最小字体有限制,即最小为12px,所以设置10px会有问题。
  • 使用sass

    $rem : 16x;@function px_rem($px){@return ($px/$rem) + rem;}
  • 3.动态设置html的font-size
    随着屏幕大小的改变,html的font-size的值应该是基准rem*改变后的屏幕宽度 / 基准屏幕宽度

  • 利用css的media query来设置(这种是一个宽度区间内一个rem)

    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){  $rem : 16x;}
  • 利用javascript来动态设置(这种方法每一个宽度点都会有一个新的rem)

    document.getElementsByTagName('html')[0].style.fontSize = 基准rem*window.innerWidth / 基准屏幕宽度 + 'px';

  • 考虑dpr

    一般我们获取到的视觉稿大部分尺寸是双倍大小的,我们一般会自觉的将标注/2,但是当我们配合rem使用时,完全可以按照视觉稿上的尺寸来设置。

  • 设计给的稿子双倍的原因是iphone等高清屏手机的存在,高清屏的像素比(device pixel ratio)dpr比较大,所以显示的像素较为清晰。

  • 一般手机的dpr是1,iphone4,iphone5这种高清屏是2,iphone6s plus这种高清屏是3,可以通过js的window.devicePixelRatio获取到当前设备的dpr,所以iphone6给的视觉稿大小是(*2)750×1334了。

  • 拿到了dpr之后,我们就可以在viewport meta头里,取消让浏览器自动缩放页面,而自己去设置viewport的content

    meta.setAttribute('content', 'initial-scale=' + 1/dpr + ', maximum-scale=' + 1/dpr + ', minimum-scale=' + 1/dpr + ', user-scalable=no');

    这样我们就直接可以使用视觉稿上的尺寸了。

  • 点击查看示例>>

    我的博客:http://bigdots.github.io、

    如果觉得本文不错的话,帮忙点击下面的推荐哦,谢谢!

    Statement
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

    The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

    HTML: The Structure, CSS: The Style, JavaScript: The BehaviorHTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

    The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

    The Future of HTML: Evolution and Trends in Web DesignThe Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

    The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

    HTML vs. CSS vs. JavaScript: A Comparative OverviewHTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

    The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

    HTML: Is It a Programming Language or Something Else?HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

    HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

    HTML: Building the Structure of Web PagesHTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

    HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

    From Text to Websites: The Power of HTMLFrom Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

    HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

    Understanding HTML, CSS, and JavaScript: A Beginner's GuideUnderstanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

    WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    AI Hentai Generator

    AI Hentai Generator

    Generate AI Hentai for free.

    Hot Tools

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

    This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    EditPlus Chinese cracked version

    EditPlus Chinese cracked version

    Small size, syntax highlighting, does not support code prompt function

    Atom editor mac version download

    Atom editor mac version download

    The most popular open source editor

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment