Some resort to additions and Hakat to make the site commensurate with the size of screen the visitor
Perhaps, most of the sites that pay attention to this thing used to Style Custom size mobile screens
No need for all that!!
Let Astilkk shrinks and expands according to the size screen the visitor automatically without changing the Style or template
We're talking about
@ Media {}
Is one of the functions and css
Function that you make Style suitable for the size of the visitor without a screen size or increase the lack of
And without damage the appearance of the site
Now I'll give you an example of faithful did not use the previous function
After entering the page or screen by shrinking the browser, you will see that nothing has changed
Preview
Now I'll give you an example and was used the previous function
After entering the page or screen by shrinking the browser, you will see that the Style younger than the smaller screen
Tھt; Zٹzٹt ± Ů ... Ů, i § i ³ Ø § Ù "AA ... • Eco, i ¹ i ¨ Ù † Zپt ³ i * i ¬ Ů ... i 'i § i' i © Ø § Ù" i ² i § i | i ±
How was that?
All this has been through the previous function
For example, if the display style or template I have a 980 pixel
Of course, this offer will not be suitable for visitors with 960 screens
But at the same time I do not want to do my design Style 960 Ashan willingly display their eyes
It also said that if the display style or template 980 pixels
# Pagewrap {
width: 980px;
!
There is no need to change
But we are using the media function to reduce the size of the screen display by
For example, I want to Style or template fits the size of 960 screens
We add is the reduction in Css file looks like this
@ Media screen and (max-width: 960px) {
# Pagewrap {
width: 95%;
}}
And you can reduce it in pixels and not percentages - it returned to your choice
So with all sizes of screens
You can also add more than one order for more than size
If we like to support the browsing of the iPhone - iPhone display screen is 480 pixels -
We add is presented reduction fits the iPhone screen is displayed
Cut back to almost 40%
@ Media screen and (max-width: 480px) {
# Pagewrap {
width: 40%;
}}
And so complete with all the elements and is given by reducing the size of the screen