Fluid layout

Streaming layout is a typical set of flexible layouts. Its key features are: the width, height and position of the key elements on the page do not change, only the container elements are stretched. In simple terms, the width of the container is stretched. This layout is sufficient for web apps with simple pages, such as pull-through pages:

From the picture above we can see:

  • The bar at the top and bottom is the same height and position no matter what the resolution is, right
  • For each job Posting in the middle, no matter how different the resolution, the company icon and other information are on the left side of the entry, and the salary is on the right, and the height is the same.

Therefore, for simple Web app pages like this, there are only one development principle to keep in mind when using streaming layout: text streaming, control elasticity, and image scaling. This layout is suitable for devices whose screen size is larger than the design draft. However, if the screen resolution is smaller than the design draft, the contents in the container may be too large, and media query needs to be adapted separately.

Rem layout

The REM layout is familiar to anyone who has developed web app pages. When the resolution changes, we use JS to change the font size of the HTML, and then we can use REM instead of PX. We can see taobao’s page in different screens, the page has obvious equal ratio change.

  • Take the vertical horizontal resolution of the design and divide it by 100(this base number is self-defined for ease of calculation, orpostcss-plugin-px2remAutomatically convert) to get the width of the body element
  • The box is 210px, and the CSS should say: height: 2.1rem
  • Add the following code to the header tag
// The design is 750px
var deviceWidth = document.documentElement.clientWidth
// When the horizontal resolution is greater than the width of the design draft, always use the width of the design draft
if(deviceWidth > 750) deviceWidth = 750;

document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';

Copy the code

I wrote all this out here, but there’s actually a better solution, which is V sub w

html {
  font-size: 100vw / 750 * 100;
}
Copy the code
  • In some cases font size cannot be used for REM, requiring additional media queries to be set separately
@media screen and (max-width:321px) {.m-navlist{font-size:15px}} @media screen and (min-width:321px) and (max-width:400px) {.m-navlist{font-size:16px}} @media screen and (min-width:400px) {.m-navlist{font-size:18px}}Copy the code

flexible

Flexible The viewport scale is dynamically set according to devicePixelRatio:

  • When devicePixelRatio is 2, scale is 0.5
  • When devicePixelRatio is 3, the scale is 0.33333, so the page size is the same as the design draft. For example, if the design draft is 750, iphone6 devicePixelRatio is 2, so its layout viewport is 750px. We can set a base to convert the page size to REM
// Dynamically set the viewport scale
var scale = 1 / window.devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content'.'initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no')

// Dynamically calculate the size of the HTML
var baseFontSize = document.documentElement.clientWidth / 10;document.documentElement.style.fontSize =  baseFontSize + 'px'
// After this setting, the rem calculation formula of CSS layout is: CSS size = design annotation size /baseFontSize

Copy the code

The less function converts rem

@baseFontSize: 75;
.px2rem(@name.@px) {
  @{name}: @px / @baseFontSize * 1rem
}
Copy the code

The processing of scale * * * *

if(! dpr && ! scale) {var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // On iOS, use 2x for 2 and 3 screens, and 1x for the rest
        if (devicePixelRatio >= 3&& (! dpr || dpr >=3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2&& (! dpr || dpr >=2)){
            dpr = 2;
        } else {
            dpr = 1; }}else {
        // For other devices, use the same 1 times scheme
        dpr = 1;
    }
    scale = 1 / dpr;
}
Copy the code

For Android devices, DPR is set to 1 by default, while for ios devices, the width of the layout viewport can be equal to the physical resolution, which means that the pixel units in the layout viewport are one-to-one corresponding to the physical pixels, which solves the 1px border and high-definition image problems. In addition, taobao’s scheme sets the width of body to 100% and makes overflow hidden. This 100% width will be calculated as the width of layout viewport, which is also 10rem. Elements with more than 10rem in the body layout will not result in a scroll bar in the layout viewport.

Font processing The font unit is PX and needs to be flexible for different DPR devices. Flexible is to set the DPR value to the HTML data-DPR attribute, and select elements from different DPR devices using CSS selectors

div { width: 1rem; Height: 0.4 rem; font-size: 12px; // fontSize} [data-dpr="2"] div {font: 24px; } [data-dpr="3"] div { font-size: 36px; }Copy the code

Less abbreviation scheme

.font-dpr(@fontSize){ font-size: @fontSize [data-dpr="2"] & { font-size: @fontSize * 2; } [data-dpr="3"] & { font-size: @fontSize * 3; }}Copy the code