I would like to achieve CSS responsive design-CodePudding

What I want to achieve

I would like to achieve CSS responsive design. (I want the text to fit the screen size)

Source code in question

li{
float: left;
margin-top: 15px;
margin-left: 50px;
width: 100%;
font-weight:bold;
font-style : italic;
font-family: 'Modern',sans-serif;

}

Problem/error message being encountered

I'm writing CSS like the above. When I change the browser size, the text size and layout remain the same and do not scale. Depending on the browser size, the layout may be corrupted.

The images change size according to the size...

width: 100%;

is it not enough?

What I have researched and tried on my.

Searching about CSS responsive design, watching movies.

Supplemental information such as the version of the tool you are using.

Environment:

VSCode ver 1.67.0 -Chrome 102.0.5005.63
OS Windouws_NT x64 10.0.22000

CodePudding user response：

Text size remains the same because you didn't explicitly set a css rule for it. So it just takes the browser's default font-size which will be around 14px. When you want responsive font-size you could try something like:

font-size: 5vw;

This makes the font-size depend on the view width. This can be fun to play with but hard to deal with in terms of consistent layout of text and other elements on your page.

CodePudding user response：

Use a scalable font-size value like view-width (vw) :

font-size: 4vw;

To make layout responsive, you can also use view-width (vw).
Here is an example:

.container {
      width:95vw;
      height:95vh; /* Optional responsive view-height */
}

Altough it is recommended to manually set font-sizes within mediaqueries.