First, the browser
The first thing to consider is the browser, which is the environment where all pages run. To put it mildly, a website is a content, and a browser is a container for storing this content. All web pages must run through a browser, so the first step in web page design is to understand the browser. On the pc side, there are five commonly used browsers, while on the mobile phone side, there are as many as 30 kinds of software with browser function. However, it should be noted that many browsers are not completely independent browsers, and many are based on the same browser, especially different versions of Android WebKit.
There are four kinds of browsers on mobile phones: built-in browser, downloadable browser, proxy browser and WebView. At present, Android and IOS occupy most of the mobile market. Therefore, in order to reduce the workload, we can ensure that Android and IOS can run when designing responsive web pages, and then consider whether to adapt to other browsers according to the actual situation and cost.
Second, the viewport
Another key point of responsive website design is the viewport. The concept of viewport is not the screen size of the device we understand, but the screen size is the physical display area of the device. Viewport refers to the content area in the browser window, but does not include tabs, toolbars, etc. The actual display area of a web page is a window. In a desktop browser, there is only one viewport, the browser window. In a mobile phone, there are the following three windows:
1. Layout viewport: It has nothing to do with the screen width of the mobile browser, but only restricts the layout of CSS.
2. Ideal viewport: The ideal layout viewport size of the device, first introduced by Apple, has an ideal browsing and reading width.
3. Visual viewport: When users see the area of the website, they can operate the visual viewport by zooming.
The most basic task of responsive layout is to set the size of layout viewport to ideal viewport.
Third, media inquiries.
The so-called media query is actually the if statement in CSS, which allows us to set a specific CSS style according to the characteristics of device display. Through proper media query, it is convenient to change the display mode of the content in the page according to the attributes such as equipment.
The real responsive design method subverts our current method of designing web pages as a whole. Being familiar with the above three aspects means that you have the foundation for designing responsive websites and can further study.
responsive web design