This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The implementation of responsive layout relies on Media Queries to achieve, select the width of mainstream devices as breakpoints to write additional styles for adaptation, but this will be more troublesome, only select several mainstream device sizes to show perfect adaptation. Even the adaptation via REM units requires an embedded script to dynamically calculate the root element size, which is what mobile does.

/* Ultra-small screen (mobile phone, less than 768px) */

/* Small screen (tablet, 768px or greater) */
@media (min-width: @screen-sm-min) { ... }

/* Medium screen (desktop monitor, 992px or greater) */
@media (min-width: @screen-md-min) { ... }

/* Large screen (large desktop display, 1200px or greater) */
@media (min-width: @screen-lg-min) { ... }
Copy the code

On the desktop, the viewport refers to the viewport area of the browser on the desktop; The mobile terminal is more complex, which involves three viewports: Layout Viewport, Visual Viewport and Ideal Viewport

Viewport units mainly include the following

  • Vw: 1VW is equal to 1% of the viewport width
  • Vh: 1vh equals 1% of the viewport height

Viewport units are different from % units. Viewport units are defined according to the percentage of viewport size depending on the size of the viewport. The % unit is the ancestor element that depends on the element.

Use viewport units to adapt pages

Multiple response breakpoints can be configured according to the screen resolution. The layout remains unchanged at the resolution within the range of the response breakpoints. When the response breakpoints are switched, the layout changes immediately

Vw is the CSS unit
// The size of the iPhone 6 was used as a baseline for the design draft
$vw_base: 375; 
@function vw($px) {
    @return ($px / 375) * 100vw;
}
Copy the code
The 1px physical pixel line is implemented using the Transform scale
.box {
    position: relative;
    &::after {
        // Implement 1 physical pixel bottom border line
        content: ' ';
        position: absolute;
        z-index: 1;
        pointer-events: none;
        background-color: #ddd;
        height: 1px;
        left: 0;
        right: 0;
        top: 0;
        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            -webkit-transform: scaleY(0.5);
            -webkit-transform-origin: 50% 0%; }}}Copy the code