Understanding of web design layout

<br />A contradiction arises. In small workshops like ours, the design and layout are basically done by one person. There are even background programs added. Assuming the layout is considered during design, we all have the ability to make adjustments. But in large companies with strict division of labor, if the designer does not understand CSS, he will not be able to layout. Or if there is a misunderstanding, the design draft will cause the layout personnel to spend a lot of time and energy. Because there are too many browsers!
I often see netizens complaining that the drafts given by designers cannot be restored. Because they understand browsers and screens differently. Some are because the effect is too gorgeous and there are too many colors. What's worse is that using flash is a waste, and html is useless... Well, let's put aside the last case and just talk about the understanding of the screen, effects and design layout.
Let’s talk about the screen first :
The screen resolution is still mainly 1024×768. There is no definition of full screen. Why? Please see why:

You can't be sure how many plugins the user's IE has installed! The more plug-ins you have, the lower the browser display height will be! You can't be sure that the user's monitor is set up correctly (tilted, curved, truncated, scaled down, or enlarged). You can't be sure that the user's monitor resolution is the optimal resolution. This is typically seen in some widescreen or tallscreen displays, some of which are scaled down proportionally and left blank. What’s worse is that the entire screen is stretched. The proportions are wrong!
To make the web page full screen. Many people say the width is 1003, while others say it is 1004. But I don't think so.
Suppose the customer requires the web page to fill the entire screen. Then, you need to know the screen resolution of the user's monitor size. If customers have low awareness of this thing. Don't change other people's resolution easily. I have a 1440×900 widescreen, and I use a 1024×768 resolution, and I'm happy with it! If the customer requires a full screen, then another problem arises: what if the customer changes to a monitor of a different size when the product is delivered? When the resolution is increased, your web page becomes narrower, and when the resolution is reduced, your web page becomes wider! What are you going to do?
In fact, there are two types of full screen. I will name one as content full screen and the other as visual full screen!
The so-called full-screen content refers to the content on the website. The left border is at the left border of the monitor, and the right border is at the right border of the monitor. The best solution is to use percentages. The negative effects of percentages:

Browser bugs make design and production more difficult
The so-called visual full screen is actually a trick. And this method. In fact, it is very simple. The header of a website is nothing more than navigation and banner. If the navigation is at the top, then the background of the navigation will be 100% and the navigation will be centered. If the banner is at the top, then pay attention to processing both ends of the image, or 100% width background!
OK, although the content width may still be 1000, 1003, or even 900 or lower, it is still 100% width visually. Just avoid the minimum width being larger than the browser width, or the customer's display resolution width being larger than your minimum width. Always OK.

Previous Page 1 2 Next Page Read Full Article

<<: Calculation of percentage value when the css position property is absolute

>>: wget downloads the entire website (whole subdirectory) or a specific directory

SQL ROW_NUMBER() and OVER() method case study

Understanding of web design layout

SQL ROW_NUMBER() and OVER() method case study

Vue+Bootstrap realizes a simple student management system

WeChat applet implements calculator function

The difference between delete, truncate, and drop and how to choose

20 JS abbreviation skills to improve work efficiency

In-depth analysis of the various backgrounds, usage scenarios and techniques of CSS

Notes on the MySQL database backup process

Detailed explanation of Vue3 life cycle functions and methods

Solve the problem of ifconfig being unavailable in docker

MySQL 5.7.18 zip version installation and configuration method graphic tutorial (win7)

Recommend

Web project development JS function anti-shake and throttling sample code

vue uses Ele.me UI to imitate the filtering function of teambition

Details on how to write react in a vue project

A simple example of using Vue3 routing VueRouter4

The relationship between JS constructor and instantiation and prototype introduction

Introduction to HTML_PowerNode Java Academy

MySQL EXPLAIN statement usage examples

CSS techniques for achieving multi-column equal height layout that the front end should master

Advanced techniques for using CSS (used in actual combat)

Detailed explanation of nginx front-end distribution method based on $remote_addr

Detailed explanation of the case of Vue child component calling parent component method

How to insert 10 million records into a MySQL database table in 88 seconds

MySQL 5.7.21 decompression version installation and configuration method graphic tutorial (win10)

Several ways to run Python programs in the Linux background

JavaScript implements the drag slider puzzle verification function (html5, canvas)