0

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

Edited by pyTony: fixed formatting

2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by dany12
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.