Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

As a front-end developer, have you ever had this headache? Every time you develop a PC web page, whether it is the official website or the admin background, the UI designer will provide you with the design draft in a ratio of 1920*1080 (16:9), leading to the drawing of the page. Two things can happen.

  1. The first design in accordance with the proportion of the design provided by the designer to draw the page, resulting in different proportions of the screen, will present different style effects, some too large and some too small, at this time the user will ask you, you are not writing a bug… Very has no language
  2. The second method is to draw the page in an adaptive way according to the scale provided by the designer, which results in the page size being different from the design draft, and also different on different devices. At this point, the designer and the user will come to the page and say, is there a 1px unit missing, is there a mistake? Very headache,

Today I will introduce a way to solve the PC side of the web adaptation method, we think useful, give me a small point like, you can also leave a message in the comment area.

PC implementation adaptation also uses rem cSS3 attribute, REM relative to the root element (i.e. HTML element)font size multiple calculated value. Here, 1920px and 1366px resolutions are common on PCS (14-inch notebooks). For the sake of illustration, let’s say the designer gives us a 1920px design, so we need to make both a 1920px screen and a 1366px screen.

Now let’s take a random 1920px area of the design, assume the width is 273px and the height is arbitrary. So how wide should it be on a 1366px screen?

We split the screen widths into 100 equal parts

//1920Resolution screen AVG =1920 / 100 = 19.20 px

//1366Resolution screen AVG =1366 / 100 = 13.66 px
Copy the code

At 1366 resolution the screen should display width = (1366 * 273) / 1920 and finally 194.228125px

//1920Resolution screen defines the rootfont-size = 19.20 px./ / that1rem = 19.20 px.

//1366Resolution screenfont-size = 13.66 px./ / that1rem = 13.66 px.
Copy the code

Adapter code

html{
   font-size:19.20 px.;  /* The default is based on the design draft */
}

@media only screen and (max-width: 1366px) {
   html{
      font-size:13.66 px.; }}#test{
   width:14.21875 rem;
}
Copy the code

The box with id test in 1920 has screen width = 14.21875 * 19.20 and finally 273

Box with ID test at 1366 screen width = 14.21875 * 13.66 and finally 194.228125

So we’ve adapted the 1920px and 1366px screens. PC is generally the majority of these two resolutions, compatible with the two resolutions of the screen is basically ok. There is basically no browser compatible with IE8 in China. Basic are IE9+, CSS3 attributes in IE9+ or can be used. However, it is recommended that small partners use the browser compatibility

Finally, in addition to the above points, some partners may feel that every time before setting the width and height of the manual conversion, it is too troublesome, do not worry about me for everyone to find a sASS method.

/ / PX rem@function px2Rem($px, $base-font-size: 19.2 px.) {
    @if(unitless($px)) {// There is no unit@return ($px / 19.2) * 1rem; 
    } @else if (unit($px) == em) { 
        @return $px; 
    } 
    @return ($px / $base-font-size) * 1rem; 
}
Copy the code

Test the above method

#test{
   width:px2Rem(273px} // output#test{
   width:14.21875 rem;
}
Copy the code

Adjust the screen resolutions to 1920px and 1366px to see how wide the gray area is.

<div id="app">
    <div class="nav">The sidebar<p>Testing p fonts</p>
    </div>
    <div class="content">content</div>
</div>
Copy the code
@function px2Rem($px, $base-font-size: 19.2 px.) {

@if(unitless($px)) {// There is no unit@return ($px / 19.2) * 1rem;

} @else if (unit($px) == em) {

    @return $px;

}
@return ($px / $base-font-size) * 1rem; {} *margin:0;

    padding:0;
}

html{
    font-size:19.20 px.;
}

html.body{
 height:100%;
}

body{
    font-size:px2Rem(16px);
}

#app{
    position:relative;

    width:100%;

    height:100%;
}

.nav{
    position:fixed;

    left:0;

    top:0;

    width:px2Rem(273px);

    height:100%;

    background-color:#E4E4E4;

    transition:all .3s;

    z-index:11;
}

.content{

    position:absolute;

    left:px2Rem(273px);

    top:0;

    right:0;

    bottom:0;

    width:auto;

    height:100%;

    background-color:#CBE9CB;

    overflow-y:auto;

    z-index:10;
}

p{
    font-size:px2Rem(20px);
}

@media only screen and (max-width: 1366px) {
    html{
        font-size:13.66 px.; }}Copy the code

rendering

If you have a better PC adaptation scheme can also tell me, welcome to leave a comment below

Use variables under sass

height: calc(100%- # {px2rem(200px)});
Copy the code