zoukankan      html  css  js  c++  java
  • 网页设计中对网页宽度的研究

    众所周知,标准网页设计一般不能出现横向滚动条,这是由网页美观,易用性等多方面决定的。
    而现在主流设计还都是针对800*600分辨率设计的。在这可怜的800像素宽里,设计师既要考虑到最大限度表现出文字与图片,还要为了美观来美化表格、增加质感和效果。真可谓是每像素必争(至少我是这样),所以经常会有朋友问,到底800*600分辨率下,想要不出现横向滚动条,网页到底可以做多宽?

    答案很简单:779像素。(在800*600分辨率下,windows外观为系统默认,ie窗口最大化,页面属性左右两侧边距为0像素)

    为什么呢,其实很简单,看看下面几张图就明白了。

    图一:windows默认情况下,滚动条宽度为17像素。

    图片点击可在新窗口打开查看此主题相关图片如下:
    图片点击可在新窗口打开查看
    图二:windows默认情况下,活动窗口边框宽为1像素,但是windows为了增加效果,会再有1像素宽的阴影,所以一共是2像素。

    图片点击可在新窗口打开查看此主题相关图片如下:
    图片点击可在新窗口打开查看
    图三:根据上面可以得出,右侧窗口边框2像素+滚动条17像素=19像素,再加上左侧窗口边框一共是21像素。

    图片点击可在新窗口打开查看此主题相关图片如下:
    图片点击可在新窗口打开查看

    而剩余的就是窗口内容了,所以可以轻松得出,内容宽度=800-21=779像素宽。

    图四:在浏览器中实际测试,779宽度不产生横向滚动条。

    图片点击可在新窗口打开查看此主题相关图片如下:
    图片点击可在新窗口打开查看


    图五:而增加780宽的表格,横向滚动条就出来了。

    图片点击可在新窗口打开查看此主题相关图片如下:
    图片点击可在新窗口打开查看


    具体设计时,一般为了考虑内容居中和方便计算,大多采用双数,所以778是最佳尺寸。知道这个的原理,1024或1280的也都可以轻松算出来了。

    ===========================================================================

      1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

      2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005

      3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001

      注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

      所以如果是1024的分辨率,你的网页不如设成1000安全一点。如果是800的分辨率一般都设成770。

      这些需要明白并且牢记,不然很可能做出来的东西不符合浏览器要求。不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化,所以800的分辨率一般设定760左右;1024的设定990左右。

    申明

    非源创博文中的内容均收集自网上,若有侵权之处,请及时联络,我会在第一时间内删除.再次说声抱歉!!!

    博文欢迎转载,但请给出原文连接。

  • 相关阅读:
    python 3 day1(上)
    JMeter (一) Thread Group
    TC-001下载并简单使用Python
    SQL Server ->> 谈SQL Server数据库大表迁移
    SQL Server ->> 记Alwayson高可用副本同步失败后续恢复的性能调优争议
    SQL Server ->> AlwaysOn高可用副本同步失败
    SQL Server ->> AlwaysOn 监控脚本
    Linux ->> Source命令
    PSD 转化成 HTML
    笔试
  • 原文地址:https://www.cnblogs.com/Athrun/p/1050198.html
Copyright © 2011-2022 走看看