Newbie, what is the appropriate size for setting the webpage when creating a webpage? _html/css_WEB-ITnose

I want to achieve such a web page size.
Designed web pages, when the user’s client resolution is different, the web page will be adjusted accordingly.
I made a web page myself. On my own computer, the resolution shows that the layout is normal. But on other people’s computers, if the resolution is different from my computer, the web page displays abnormally. For example, the background image will be tiled. After displaying once, display half of it again

Reply to discussion (solution)

Use 100 points to kill all resolutions.

This problem will not occur if you use relative layout

If the user’s client resolution is different, the web page will be adjusted accordingly.
You can use js to identify the resolution and then call different styles, but this is very troublesome because you have to write several sets of styles
It is recommended to use percentage or relative layout as mentioned on the 2nd and 3rd floors
In addition, you said "the background image will be displayed once in the tile display, and then half of it will be displayed"
This just needs to center the background and only display it once
background:url() center no-repeat

Many web pages now advocate responsive layout. You can learn about

There are two ways, 960 layout or responsive layout.
The default page of 960 layout is 960 pixels, and the wider sides are left blank. Responsive layout is all done with percentages.
Nowadays, responsive layout is popular

You can use responsive layout to try out

The background image can be set to not be tiled, and then the background image can be designed to match the background color

Background image You can set it to not be tiled, and then the background image can be designed to match the background color

Beginners, after learning

Ask:
Just like the web page of the csdn forum changes with the user's resolution change.
For example: Compared with 1024*768 and 1280*1024, the picture text becomes larger, but the layout is not messy. Why does the picture become larger or smaller? I just want to achieve something like this

Ask:
Just like the web page of the csdn forum changes with the user's resolution.
For example: Compared with 1024*768 and 1280*1024, the picture text becomes larger, but the layout is not messy. Why does the picture become larger or smaller? I just want to achieve this
How do you control whether the picture becomes larger or smaller?
Please understand the relationship between pixels and resolution.

I don’t know! Feel sorry! New to web development!
You can change the screen resolution of your computer, just look at the csdn website and you will know! I don’t know how to describe it

Relatively adaptable, it actually requires a lot of effort. I suggest you not use this as the final version if you are not an experienced user
My suggestion is to make a few more versions with different widths and judge the client through js Choose a relatively narrow one (can be appropriately reduced by an order of magnitude)
Record the cookie, and future pages can read this cookie as the basis for page layout
In addition, keep some buttons on the page for customers to choose the width. , to avoid errors in js judgment, customers can adjust it manually, and of course cover cookies

Then use relative adaptability as extracurricular homework to develop a feasible final single version

Anyway, I don’t think it is This version can be adapted to mobile phones, notebooks, 1080p, and 4k screens at the same time... I haven’t mentioned that some screens can be erected

Fixed width, centered. Add a background color to the web page.

It is safer for novices to use the 960 layout directly, but you can learn responsive layout, but this layout takes a lot of time and effort. You must consider the performance of a series of widths from 320 to 1920, if necessary You also have to hide some content, which is indeed too demanding for novices.

You can check the 960 grid system

Look at the resolution, generally 1024*768

Relatively adaptable actually requires a lot of effort. It is recommended that you are not an experienced user and do not take this as the final result. Version

Agreed! ! !
In addition, if you look at the CSS of major websites, you will know that shit is relatively adaptive. Difficult one B.

width:100%

Ask:
Just like the webpage of the csdn forum changes with the user's resolution.
For example: Compared with 1024*768 and 1280*1024, the picture text becomes larger, but the layout is not messy. Why does the picture become larger or smaller? I just want to implement this
CSS style using percentages, so that it can automatically change according to the browser or screen size.

Let the original poster take a look at the bootstrap source code and follow his instructions.

background:url() center no-re solves the problem of tiling your images.
Also have width: 1100px; Define the width and height of your web page accordingly. Add width: 100% to the overall large container; no matter how the resolution changes, the web page layout will not change.