Geek Answers Handbook

How to scale my site based on different screen widths

I would like to change the scale of my website to 0.7 or similar depending on the width of the device used.

The only useful information I could find is the following tag <meta>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I was wondering if it is possible to write some code, as shown below, to apply a certain scale to a website only if the width of the device corresponds to a certain width or width:

@media screen and (min-device-width : 320px) and (max-device-width : 480px) { 
  .body {
    initial-scale: 0.7;
  }
 }

Or am I saying complete no-sense? Sorry, I'm new to CSS and HTML and just looking for a workaround to reduce the initial scale on the laptop screen from 1.0 to 0.7.

Your answers will be welcome. Thank you very much in advance!

Best

Pascal

+4
3

, html-, :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

, :

: . .

: , .

: , .

Scalable = 0 , .

, : , .

0,7, 3 , .

, .

- , ( ) , () / .

+2

css -, default css ( -):

.some-class {
     font-size: 16px;
     padding: 10px;
}

@media (max-width: 480px) {
    .some-class {
        font-size: 13px;
        padding: 7px;
    }
}
0

"! important" , , ,

.some-class {
     font-size: 16px;
     padding: 10px;
}

@media (max-width: 480px) {
    .some-class {
        font-size: 13px!important;
        padding: 7px!important;
    }
}
-1

More articles:


All Articles