The Basics of adaptive web – design (Responsive). Or how to make a simple template adaptive.
Hello, dear blog readers. Today I am with you I would like to talk about the basics of responsive design (responsive), as well as sort through one of the examples that I have prepared.
In other words, we now know that such a responsive web design, and general how to use it or do. I want to say right away that I totally will not describe it, and touch on so to say the most important thing. The post will be designed for the beginner. So I’ll try you will not confuse.
What is responsive web design?
You may have more than once went to some sort of site from your mobile device, and maybe you had to increase web page to be able to read the small text that is more and in addition does not completely fit on your mobile device. Thus the need to scroll left or right web page, which in turn causes some inconvenience. But if you went to the site with an adaptive web – design, here the picture changes completely. You do not need to make any body movements are all very comfortable and clear to read.
In other words, the adaptive design is responsible for the correct display of a site on a mobile device. He said, adjusts the site to fit mobile devices.
A bit of theory (Basics)
It is well known that the entire web design large part is based on the CSS, to the CSS given by almost all the mapping rules site in different browsers. Accordingly, an adaptive web – design is no exception. The most important thing is the standard rule of media queries, which are defined and all new classes under the desired screen resolution. But of course, the standard CSS layout has not changed much. . The biggest change is the use of a percent rather than pixels in width of objects
For example, the main content block size on the page is equal to 600px, and 400px wide sidebar block. The responsive design, these values need to register as a percentage. On this basis we would get content width of 60% and the width of the sidebar 40% I hope that you are caught.
Also in the new style properties that have not been used for a fixed template to be used. Here they are,
max-width and width, if the width of the site equal to the width, 1000px then decreases the browser window will appear horizontal scroll bar, in other words, the site simply will not intermeddle in the window . And it will have to scroll horizontally to see the entire site. But if we put width, 100% The site will extend over the entire width of the monitor. At low resolutions, this method will look normal, but on the monitors with higher resolution site is very stretched and will absolutely not readable. So, if you want the site to remain wide 1000px, but also in order not to get a horizontal scroll bar, you need to use max-width.
Now, our unit will be a rubber, which will be of such size as the browser window but if the width reaches 1000 pixels unit stops to stretch
min-width and width,. here quite the opposite is true, in the first case we get rid of the horizontal scroll bar, then there we return it. In other words, if the rubber pad in a width of 100% with a decrease in resolution will be arranged under the browser window, the window is smaller and less block itself. min-width can be set to block width after which it will cease to decline. For example, if you set the min-width, 200px, then the block when the given width stops falling, so there will be a horizontal scroll bar in the browser
Based on the above theory I have. produced the most simple pattern that shows the essence of responsive web design
this pattern consists of three blocks -. this cap site, the main content and the sidebar. So I get a block to which I assign the appropriate ID CSS,
How to check
To verify this template, simply poizmenyat cursor size of the browser window, and everything will work, or use? services to test responsive design.