responsive website design and development


responsive website design and development

one、what is

(responsive website design and development)Responsive Website Design(Responsive Web design)is a web page design layout,Page design and development should be based on user behavior and device environment(the system platform、screen size、screen orientation etc.)Respond and adjust accordingly

The most famous phrase describing responsive interfaces is“Content is like water”

The vernacular is“If you think of the screen as a container,then the content is like water”

(responsive website design and development)Common Features of Responsive Websites:

  • Simultaneous adaptationPC + flat + mobile phone, etc.
  • Tabbed navigation changes to classic drawer when approaching handheld devices
  • The layout of the website will adjust the size and position of the modules according to the viewport
responsive website design and development(responsive website design and development)

two、Method to realize

The basic principle of responsive design is to detect different device screen sizes through media queries.,To handle mobile,The page header must havemetastatementviewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

The properties correspond to the following:

  • width=device-width: is the size width of the adaptive mobile phone screen
  • maximum-scale:is the maximum value of the scaling
  • inital-scale:is the initialization of scaling
  • user-scalable:is the user's zoomable operation
(responsive website design and development)The ways to implement responsive layout are as follows:

  • media inquiries
  • percentage
  • vw/vh
  • rem

media inquiries

CSS3Zhongdi adds more media queries,likeifthe same conditional expression,We can set different types of media conditions,and according to the corresponding conditions,Call the corresponding style sheet for the corresponding eligible media

use@MediaInquire,Different styles can be defined for different media types,Such as:

@media screen and (max-width: 1920px) { ... }

when the viewport is375px - 600pxbetween,Set a specific font size18px

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;

via media queries,Responsive layouts can be achieved by writing different styles for devices with different resolutions,For example, we have different resolution screens,Set a different background image

For example, for small screen mobile phones@2xpicture,Set up for larger screen phones@3xpicture,It can be easily achieved through media queries


by percentage unit " % " to achieve a responsive effect

such as when the width or height of the browser changes,by percentage unit,It is possible to make components in the browser width and height Changes with browser changes,to achieve a responsive effect

heightwidthThe percentage of the attribute depends on the width and height of the parent tag,But other box properties are not fully dependent on the parent element:

  • child elementtop/leftandbottom/rightIf you set a percentage,compared to the direct non-staticposition(default targeting)the height of the parent element/width
  • child elementpaddingIf you set a percentage,Either vertical or horizontal,are relative to the immediate parent element'swidth,and the parent element'sheightirrelevant。
  • child elementmarginIf set to percentage,Either vertical or horizontal,are relative to the immediate parent element'swidth
  • border-radiusDifferent,If setborder-radiusas a percentage,is relative to its own width
(responsive website design and development)You can see that each attribute uses a percentage,will cause layout complexity,So it is not recommended to use percentages for responsiveness


vwIndicates the width relative to the view window,vhRepresents the height relative to the view window。any level element,In usevwunit case,1vware equal to one percent of the view width

Similar to the percentage layout,mentioned in previous articles with%difference,No further description will be given here


also mentioned before,remis relative to the root elementhtmloffont-sizeAttributes,By default browser font size is16px,at this time1rem = 16px

You can take advantage of the aforementioned media queries,Change the resolution for different devicesfont-sizethe value of,as follows:

@media screen and (max-width: 414px) {
  html {
    font-size: 18px

@media screen and (max-width: 375px) {
  html {
    font-size: 16px

@media screen and (max-width: 320px) {
  html {
    font-size: 12px

In order to more accurately monitor the change of the visible window of the device,we cancssinsert beforescriptLabel,The content is as follows:

//Dynamically set font size for root element
function init () {
    // get screen width
    var width = document.documentElement.clientWidth
    // Set the root element font size。wide10equal parts = width / 10 + 'px'

//Load the app for the first time,set once
// The timing of listening for the event of the mobile phone rotation,reset
window.addEventListener('orientationchange', init)
// Monitor phone window changes,reset
window.addEventListener('resize', init)

Regardless of how the device viewable window changes,always setremforwidthof1/10,Implemented percentage layout

(responsive website design and development)Besides,We can also take advantage of the mainstreamUIframe,Such as:element uiantdThe provided grid layout is responsive


(responsive website design and development)Responsive design implementation usually thinks from the following aspects:

  • flex box(include pictures、sheet、video)and media queries
  • Flexibility to create fluid layouts using percentage layoutsUI,Use media queries simultaneously to limit the size of elements and the range of content changes
  • Use relative units to make content adaptive
  • Choose breakpoint,Implement different layouts and content display for different breakpoints


Responsive layout advantages can be seen:

  • Strong flexibility in the face of different resolution devices
  • Can quickly solve the problem of multi-device display adaptation


  • Layout only、information、A department type website with an uncomplicated framework
  • Compatible with various devices,low efficiency
  • code cumbersome,There will be hidden useless elements,Loading time increased
  • In fact, this is a kind of eclectic design solution,A variety of factors affect the optimal effect
  • To a certain extent, the original layout structure of the website has been changed,User confusion occurs