On front-end design of responsive web site

Some time ago I to the concept of the response is still bootstrap, amaze and other framework components, used several times also disagree, I think the domestic search engine in the provision of mobile search results page will still add points to the mobile site, but not like Google to identify the response-type site, It may take some time to develop. But there is no doubt that the web trend is now shifted to mobile priority, of course, if you use the domain name or other solutions is not not, but the response may be simpler, the development prospects are good.

I've been writing response pages every day for two or three weeks, accumulating a lot of response pages and Ajax experience. I have roughly combed the focus of several response pages, and if I want to develop this or have some interest in it, I hope I can give you a little help.

　　Control size

The front-end developers who are accustomed to PC pages may prefer to use PCs to control size, but in response pages there are more em and REM, and using them to control the size of the font or even the size of the frame is very obvious to the overall effect.

For example, my font settings are 10px/20px/30px and so on, the site of different natural fonts will have the size of the difference this is inevitable, if a page is complex enough or enough text, the size of these fonts is also a large amount of work, However, in the response page you design them is not done: you use a mobile phone to browse the page will find that the font will support a lot, and even the individual title full of the mobile phone screen, which on the mobile end of the user experience impact can be imagined. So you're going to start writing media queries, then found that a page has dozens of fonts need to be set, if they are adjusted at different resolutions you may need to write more than a few CSS code, but if you use Em/rem, you can greatly reduce the workload, but also to ensure a uniform proportion of the font.

On the interpretation of Em/rem you can search, online tutorials are countless, in fact they are as simple as PX, when I began to use but only spent a few minutes familiar with them. As mentioned earlier, you can also use them to control the size of the frame, and then scale the page in a responsive way, which requires plenty of computation. In addition, it is worth mentioning that the font icon can also be used to control, you can refer to the different "font icon" official documents.

　　Percentage

There are several ways to solve scaling problems, the most suitable for beginners is undoubtedly a percentage of the layout, under the key width set the percentage can play an unexpected effect:

box1{width:100%;}

ul{margin:0 2%;}

I'm not advocating the full use of percentages, but sometimes this can greatly reduce the workload, to box1 width after 100% it will automatically fill the entire browser width, no matter what resolution you are mobile PC, it always has a good performance. At this time you give box1 below the UL set about 2% of the margin is also so, as the browser window size changes when the actual margin size of the UL will change, so that everyone has understood the concept of percentage layout.

Of course, sometimes there is no imaginative effect, especially on a smaller resolution, it would seem strange to have a nice percentage setting, because the response type is mostly limited to the width, the length is determined by the document and the browser, and the desire to have a good experience on all terminals requires media Query to solve the problem.

　　Media Query

Popular explanation is the CSS media query function, it can accurately identify the device can also set their own resolution or width, W3cshool has media query reference documents, if you think too much documentation I can roughly explain how it works.

You might be able to set the height of a box when you need it, but it might look good on your PC when box has a 500px height, but it's scary when you open it, the whole box is flooded with pages, the contents are cluttered, and the user experience is severely affected, At this point you can use media queries, and use it separately for different sizes of different heights, such as 640/320 when the box is open at 300/200px height, so that looks good.

You may think of import, in fact, the media query can be so understood, it for different widths or devices to set a similar import CSS rules, to ensure that the actual rendering of the effect of the finished page.

Media query can also prepare a page for a number of different CSS, when the size of the device does not use different CSS files, if the style file is relatively large can also consider this method.

　　Talk about the framework

I have seen and the actual use of the front-end framework, many are rich front-end type of design, do not recommend the Novice front-end blind use of the framework to layout, no matter how beautiful the frame looks. In the actual use of the process you may find a lot of problems, such as the class name too much too complex (in the absence of a lot of CSS experience may be less aware of the agreed class name), style conflicts. Introducing too many resources leads to heavy pages, deviations from design effects, and so on.

Take bootstrap, if you want to design a Google-like search box is very difficult, the Google type of search box is actually a input into box, and then in this box and then add the left and right icon, If you do it with bootstrap, there may be a lot of inexplicable conflicts, but what do you actually get? A rounded corner a row high? Or a percentage of his width? These are just a few lines of code to write with CSS.

There are also some frameworks that are overly dependent on Ajax, they may have a good idea, a lot of Ajax in the front end looks really cool, the user's friendliness is strong enough, but a large number of requests to the server is not friendly, may cause the actual load of the server is greatly reduced. In a word, according to the actual demand to solve the problem, the framework is not omnipotent.

Source: Veidt Blog submission, original link.