Still using REM as a mobile-fit? Latest Mobile Adaptation Solutions VW,VH Learn!

Source: Internet
Author: User
Tags vmin

VW,VH are all units relative to the screen viewport.

VW: The width relative to the viewport. The viewport is divided into 100 units of VW;

VH: The height relative to the viewport. The viewport is divided into 100 units of VH;

Vmax: The larger of the width or height relative to the viewport. One of the largest is the Vmax, which is divided into 100 units;

Vmin: The smaller one relative to the width or height of the viewport. The smallest of them is divided into 100 units of vmin;

After explaining the relevant concepts, the following is the specific adaptation program:

The general UI gives design drafts that are 750x1334, so you can use sass to write a function:

1 $containerWidth: 750;2 $containerHeight: 1334;
3 @function Viex ($px) {4 @return $px *100/$containerWidth * 1vw;5}
6 @function Viey ($px) {7 @return $px *100/$containerHeight * 1vh;8}
function set, down is simple, in the Web page layout, CSS size settings, the design of the number of drafts, here is how much, such as:
1. Header {2 position:relative;3 Width:viex (4 height:viey); 5 Background-image:url (.. /assets/self/1126215672.jpg); 6 Background-size:viex (Viey); 7 position:relative;8}

Then open the browser to see, find the layout size, whether on the phone or tablet is suitable.

Still using REM as a mobile-fit? Latest Mobile Adaptation Solutions VW,VH Learn!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.