» » Talk about responsive front-end web design

 

Talk about responsive front-end web design

Author: bamboo06 on 24-05-2015, 02:30, views: 2159

5
I have some time before the concept of responsive or Bootstrap, Amaze like the frame assembly, used a few times also disagree, I think the domestic search engine to provide mobile search results page or give mobile site extra points, but not like google responsive as recognition sites may take some time to develop. But there is no doubt that the priority now move to mobile Web trends, of course, if you use the domain name or other solutions are not impossible, but may be more responsive simpler, prospects are also good.
Talk about responsive front-end web design

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.

Category: CSS / Internet

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 1 Comment
  • 0 Articles
25 April 2017 23:12

ThomasStewart

Reply
  • Group: Members
  • РRegistered date: 25.04.2017
  • Status: Currently Offline
 
The lessons take you through the essentials of every language. At that point you advance to more propelled lessons like question arranged programming, javascript outline, and do my assignment. Class exercises incorporate testing exercises, for example, designing an arcade amusement and building a web application.

<
  • 0 Comments
  • 0 Articles
26 July 2017 18:09

JOE

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
18K red gold fake rolex case inlaid with 66 diamonds, white mother of Replica Watches pearl dial inlaid 12 diamonds, 18K red gold mesh braided bracelet, red gold button swiss replica watches Baidu Feno in the moon phase automatic watch

<
  • 0 Comments
  • 0 Articles
7 October 2017 00:24

Michel Jhon

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I think that a responsive front-end web design jazzes everything up. It takes it up an ante. The SMA Web Design and Marketing have certainly been helping me out lately, plenty much.

<
  • 0 Comments
  • 0 Articles
6 December 2017 21:25

Eliana Hermione

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I've seen and the front casing really utilized a large number of them are rich sort of front-end plan, it doesn't suggest the utilization of the front casing learner oblivious to format, paying little heed to the casing looks more excellent. In the real utilization of the procedure we may find that a ton of issues, for example, an excess of excessively confused class names class names may know next to no about the understanding without a great deal of css encounter style clashes. Prompt the presentation of excessively numerous assets page from the composed impact UK Essay Help

<
  • 1 Comment
  • 0 Articles
27 December 2017 19:55

BradyLivingston

Reply
  • Group: Members
  • РRegistered date: 27.12.2017
  • Status: Currently Offline
 
Web designing is known to be more famous now a days and there is the specialty that gives us much about it. Without this art you cannot get the assignment help without popularity and there is the ideas about it.

Information
Comment on the news site is possible only within (days) days from the date of publication.