Both three weeks I have been writing every day responsive page, thereby accumulated a lot of experience responsive page and the ajax. I generally focus combing several responsive page, or if you want to develop this talent was viewed with some interest, we hope to give you a little help.
Control the size
Accustomed to the PC front-end developer page may prefer to use pc to control the size, but appears more responsive pages are em and rem, use them to control the font size and even the frame size of the overall effect is very obvious .
Figuratively, my font settings are different for different local differences will naturally font size on the site 10px / 20px / 30px, etc., which is inevitable, if a page of text or a sufficiently complex enough, these fonts The size of the set is a large amount of work, but in responsive design page you finish them not get away: you look at page using a mobile phone will find great support of fonts, and even individual title stays full of mobile phone screen, This impact on the mobile end user experience can be imagined. So you want to start writing media query, and then find a page there are dozens of fonts need to set up, if you put them in a different resolution adjustments may be required to write the next sentence of more than one hundred css code, but if you use em / rem, it is possible to greatly reduce the workload, but also to ensure the unity of proportional fonts.
About em / rem explanation we can own search, online tutorials such numerous, in fact, they are as simple and px, when I started, but also familiar with them only a few minutes. As previously said the same, you can also use them to control the size of the frame, and then the next page again responsive uniform scale, of course, this requires a sufficient number of calculations. Also worth mentioning is the font icon can also be used to control them, specifically with reference to different "Fonts icon," the official document.
Percentage
Scaling ideas to solve the problem there are several, is undoubtedly the most suitable for novice percentage-style layout, the width of the key setting percentage can play an unexpected effect:
box1 {width: 100%;}
ul {margin: 0 2%;}
I do not use all respected percentage layout, but sometimes it may significantly reduce the workload, after box1 set the width to 100% it will automatically fill the entire width of the browser, no matter what the resolution of your PC is a mobile phone, it always It is a very good performance. This time you give box1 following ul set about 2% margin, too, as when the browser window is resized, the size of the actual margin ul also varies, to say how much we also understand the concept of percentage layout.
Of course, sometimes there will be no effect of the imagination, especially when on a smaller resolution, seemingly good percentage of original setting will look strange, because most of the time only responsive agreed width and length are by the document and browser to decide, when you want it on all the terminals have good experience on Media Query needs to solve the problem.
Media Query
Popular explanation is CSS media query functions, it can accurately identify the device can also set your own resolution or width, w3cshool There Media Query reference documentation, if you think the document too rough I can explain it It works.
Where necessary, when you could have a box set height 500px when the box has a height that it might look good on a PC, but a bit scary with the phone is open, the entire box full of pages, contents inside arrangement chaos serious impact on the user experience, this time you can use media queries Media Query, using it as a separate set of different sizes in different heights, they are at the height of 300 / 200px time when such 640/320 box opens so It looks good.
You might think of import, in fact, media inquiries can be understood, it is set up similar to the import of css rules for different widths or equipment to ensure that the actual effect of the rendered page.
Media queries can also prepare several different CSS to a page size is not the same when the device uses a different CSS file, if the style file is large this approach can also be considered.
Talk about the frame
I've seen and the front frame actually used, many of them are rich type of front-end design, it does not recommend the use of the front frame novice blind to layout, regardless of the frame looks more beautiful. In the actual use of the process we may find that a lot of problems, such as too much too complicated class names (class names may know very little about the agreement in the absence of a lot of css experience), style conflicts. Lead to the introduction of too many resources page onerous, from the designed effect, and so on.
Take bootstrap, if you want to design a similar google search box becomes difficult, google search box type is actually included in an input box inside, then add the icon in the left and right inside the box, if do you use the bootstrap may be many baffling conflict, but in fact what you got it? A fillet a row height? Or his percentage width it? These use css to write code that is only a few things.
There are some framework excessive reliance AJAX, they may a good idea, a lot of AJAX in the front end looks really cool, user-friendliness is also strong enough, but a large number of requests to the server is not friendly, it may cause the server The actual load is greatly decreased. In short or a word, according to the actual needs to solve the problem, the framework is not a panacea.
