当前位置:网站首页>[optimal web page width and its implementation] [recommended collection "
[optimal web page width and its implementation] [recommended collection "
2022-07-07 05:15:00 【Full stack programmer webmaster】
Hello everyone , I meet you again , I'm the king of the whole stack .
1.
When designing a web page , Determining the width is a very distressing thing .
With minifun.cn For example , according to Google Analytics The statistics of , More than half a year , The screen resolution of visitors is 81 Kind of . The minimum resolution is 122×160, This should be a mobile phone ; The maximum resolution is 3360×1050, God knows what equipment it is .
A web page should be on all kinds of screens with such great differences in size , All present satisfactory results , You can imagine the difficulty . for instance , a sheet 400px Wide picture , stay 800px Will occupy 50% Width , And in the 1920px On the screen (Windows Vista Popular settings for ), Only occupy 20%.
2.
at present , The common screen resolution width is about 6 Kind of :800px,1024px,1280px,1440px,1680px and 1920px. among ,1024px Most common , But with the popularity of large screen displays , Higher resolution is becoming more and more .
There are two common solutions :
The first one is : use javascript According to different client resolutions , choice css Stylesheet file , See here for specific measures . The second kind : Use flexible layout (Fluid Width Layout), Realize the adaptability of web page width .
The advantage of the first method is , According to different screen resolutions , Adopt a completely different layout , The disadvantage is to design and maintain multiple style sheets , More trouble . The second method uses only one stylesheet , It's easier .
The following is based on css-tricks The solution on , Discuss how to implement the second method , It's actually very simple .
3.
First , The default width of the web page , Determined to meet 1024px Wide display . It's not just because 1024×768 Is now the most common resolution , Also because this width is most suitable for web pages :1) It can hold enough content , Enough layout for three columns ;2) Single line text should not be too long ,1024px It's the limit , Otherwise, it is easy to produce reading fatigue ;3) Under the current Internet bandwidth , It is difficult for web pages to use large-scale images required by large resolution .
secondly , The width of the page will be 780px-1260px Within the scope of , Automatic change , That is, the minimum is not less than 780px, No more than 1280px.
Last , For greater resolution , The content of the web page will be automatically centered .
4.
The following is CSS The way a document is written , as long as 4 That's ok . It should be noted that , These lines of statements are for the entire page , namely body Label or the outermost one div Area .
margin: 10px auto;
This line ensures that the web page is at any resolution , Will be centered .
min-width: 780px; max-width: 1260px;
These two lines specify the minimum and maximum width of the web page . Be careful ,IE6 These two lines are not supported , That is, they are IE6 Is invalid .
width:expression(document.body.clientWidth < 782? “780px” : document.body.clientWidth > 1262? “1260px” : “auto”);
This line is aimed at IE6 Solutions for . It USES a CSS expression , It can also be done through javascript Realization .
in addition , If you want to make each block in the inner layer automatically scale , Their width can be expressed as a percentage , such as :
#div-left{ width:50%; } #div-right{ width:50%; }
Please check here for the final effect and source code download . By changing the size of the browser window , You can find the webpage in 780px-1260px It will automatically expand and contract within the range of .
5.
Last , It is recommended that you use computers at ordinary times , Don't blindly adopt high resolution , It doesn't make much sense .
( End )
Publisher : Full stack programmer stack length , Reprint please indicate the source :https://javaforall.cn/120847.html Link to the original text :https://javaforall.cn
边栏推荐
- Ansible中的inventory主機清單(預祝你我有數不盡的鮮花和浪漫)
- 【最佳网页宽度及其实现】「建议收藏」
- Complete code of C language neural network and its meaning
- Error: No named parameter with the name ‘foregroundColor‘
- Development thoughts of adding new requirements in secondary development
- 高数中值定理总结
- Monitoring cannot be started after Oracle modifies the computer name
- 2. Overview of securities investment funds
- 动态生成表格
- Is it necessary to renew the PMP certificate?
猜你喜欢
【二叉树】二叉树寻路
Sublime tips
【opencv】图像形态学操作-opencv标记不同连通域的位置
Ansible概述和模块解释(你刚走过了今天,而扑面而来的却是昨天)
Operand of null-aware operation ‘!‘ has type ‘SchedulerBinding‘ which excludes null.
U++ 元数据说明符 学习笔记
Harmonyos fourth training
torch optimizer小解析
Ansible报错:“msg“: “Invalid/incorrect password: Permission denied, please try again.“
How to choose an offer and what factors should be considered
随机推荐
高数中值定理总结
c语言神经网络基本代码大全及其含义
Ansible报错:“msg“: “Invalid/incorrect password: Permission denied, please try again.“
Talk about the importance of making it clear
Is PMP really useful?
PLC模拟量输出 模拟量输出FB analog2NDA(三菱FX3U)
Mysql database (basic)
File upload vulnerability summary
AttributeError: module ‘torch._ C‘ has no attribute ‘_ cuda_ setDevice‘
Sublime tips
IMS data channel concept of 5g vonr+
Auto. JS get all app names of mobile phones
The execution order of return in JS' try catch finally
Error: No named parameter with the name ‘foregroundColor‘
Linkedblockingqueue source code analysis - initialization
pmp真的有用吗?
Stm32f103ze+sht30 detection of ambient temperature and humidity (IIC simulation sequence)
Error: No named parameter with the name ‘foregroundColor‘
SQL injection - secondary injection and multi statement injection
QT simple layout box model with spring