`
prothi
  • 浏览: 60591 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Web UI(DPI问题)

    博客分类：
  • HTML
 
阅读更多
最近在做web项目，主要使用css+html搭建UI,设计Web UI考虑浏览器和分辨率的问题是理所当然的，但是，有一个属性DPI(右键桌面->设置->高级)有正常(96DPI),大尺寸(120DPI)和自定义这几个选项。我们项目的界面在正常(96DPI)下排版正常，但是在大尺寸(120DPI)下就会出现局部地方混乱的情况，大家有谁遇到过这种问题，谈谈自己的经验吧。（关于WEB UI设计的也行）
分享到：
| 如何学习Extjs(经验谈)
评论
5 楼 prothi 2009-08-20  
xiaog 写道
prothi 写道

这个是你说的问题吗？

不是的，是内部div很宽会把外部自适应的table顶宽
其实我是想要一个外框宽自适应，内框宽大于外框时变成拖动条。内框是div，外框随便。
还有我改了DPI，没发现css控制的页面字体大小有变化，是我机器问题么？还是要重启？

那个DPI是重启之后才生效的~
然后我试过你说的问题，这个我想需要借助于js来实现，一方面，如果内框想出现滚动条，就必须设定一个设定一个固定的宽度，而不能是100%之类的，而要想实现外框自适应，内框的宽度又只能用百分比来写。所以这里应该有js来控制一下：当外框宽度改变之后(监听)，将内框(DIV)的宽度改为外框(Table)的宽度（一个值而不是百分比），然后将内框DIV的样式写成overflow:auto;就应该可以了。我觉得是这样的~
4 楼 xiaog 2009-08-20  
prothi 写道

这个是你说的问题吗？

不是的，是内部div很宽会把外部自适应的table顶宽
其实我是想要一个外框宽自适应，内框宽大于外框时变成拖动条。内框是div，外框随便。
还有我改了DPI，没发现css控制的页面字体大小有变化，是我机器问题么？还是要重启？
3 楼 prothi 2009-08-20  
xiaog 写道
既然有css控制字符大小 怎么会有这个问题，不解。
我倒是有个困扰很久的问题，就是一个固定列宽的div如何嵌套在一个自适应列宽的table里

css虽然能控制字符大小，例如你设定font-size:12px;但是不同DPI机器上的显示的字的大小还是不同的。这个跟样式没关。
还有你说的那个问题，可能是我没理解好你的意思，我理解你的问题就是在一个Table（列宽可变）里放一个固定宽度的DIV
我觉得没什么问题吧。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
		<style type="text/css">
			#myDiv {
				background-color:red;
				width:200px;
			}
		</style>
    </head>
    <body>
        <table width="100%" border="1" height="200">
            <tr>
                <td>
                    1
                </td>
                <td>
                    <div id="myDiv">
                    	hello
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

这个是你说的问题吗？
2 楼 lightmei 2009-08-19  
是有这个问题，以前好像通过js去调节的。
1 楼 xiaog 2009-08-19  
既然有css控制字符大小 怎么会有这个问题，不解。
我倒是有个困扰很久的问题，就是一个固定列宽的div如何嵌套在一个自适应列宽的table里
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    UI设计师面试考试题(带答案).docx

    #### 五、网页设计WebUI的标准尺寸 在现代网页设计中，为了适应主流浏览器的显示尺寸，常见的页面宽度设置为**960px、970px、980px、990px、1000px**（A）。这样的尺寸既能确保设计的美观性，也能兼容不同设备的显示...

    UI设计师试题(带答案)1

    在Web UI设计中，常见的页面宽度通常是960px到1000px，这是为了适应大多数主流浏览器的视窗大小。分辨率方面，网页设计通常使用72dpi，这是因为显示器的显示密度不同于印刷品，72dpi符合屏幕显示的需求。 【UI设计...

    PowerUI1.0.0 for PB

    控件文本支持系统DPI缩放设置。 颜色格式统一采用ARGB，控件可以通过响应OnGetColor等事件来修改预定义颜色。 所有控件都可以自定义颜色风格而无需修改PowerUI源代码。 运行时具有轻量级控件反SPY功能。

    UI设计师面试考试题(带答案).doc

    5. 网页宽度：在Web UI设计中，常见的页面宽度设定在960px到1000px之间，这是因为这些尺寸适应了大多数主流浏览器的窗口大小，确保了跨平台的兼容性。 6. 分辨率的显示密度：网页设计通常采用72dpi，这是基于屏幕...

    UI设计师模拟精彩试题.doc

    网页界面设计通常采用的分辨率显示密度是72dpi（每英寸点数），这是考虑到Web页面的显示标准。高分辨率如300dpi通常用于印刷品，而低分辨率如600dpi则不常见于网页设计。 【手机端UI设计的分类和布局】 手机端UI...

    Delphi-DirectUI:Delphi DirectUI控件

    JDUI是一套Delphi DirectUI界面引擎，基于Graphics32并做了大量针对性的性能优化，支持高DPI缩放， 具有非常优秀的渲染性能和酷炫的动画特效，本项目开发于2013年，一直给自己项目使用，已上线运营案例： ...

    网站界面ui设计答案.docx

    网页设计通常采用72dpi的分辨率，这是基于Web显示的特性。 UI设计不仅限于网页和软件界面，还包括移动应用、游戏界面等多种形式，但户外海报设计则属于传统平面设计领域。图像格式的选择也很关键，GIF支持动画，PNG...

    WPF项目模板-抽屉式菜单-Material Design UI-现代风格

    在本项目模板中，可能已经处理了DPI变化时的缩放问题，确保图标、文本和其他元素在高DPI显示器上不会模糊。 **项目结构** "Project"这个文件名可能代表了项目的根目录，其中可能包含以下关键部分： 1. **解决方案...

    网站界面ui设计答案.doc

    GIF支持动画，PNG支持透明，JPEG适合色彩丰富的静态图片，而BMP虽然色彩丰富，但文件较大，不适合Web页面使用。 【Photoshop快捷键】 在Photoshop中，快捷键C对应的是裁剪工具，Ctrl+Alt+C会打开“变换”操作面板...

    Android-androidUI适配屏幕适配

    同时，Android也根据像素密度（DPI）将屏幕分为低密度（ldpi）、中密度（mdpi）、高密度（hdpi）、超高密度（xhdpi）和超超高密度（xxhdpi）等类别。开发者需要为不同的尺寸和密度提供相应的资源文件，以确保在不同...

    python selenium UI自动化解决验证码的4种方法

    在进行Web自动化测试时，遇到的一个常见问题是验证码的处理。验证码（CAPTCHA）是用来区分用户是人类还是机器的一种测试手段，这为自动化测试带来了挑战。本文将详细介绍如何使用Python和Selenium解决验证码问题的四...

    electron改-32位版本（web应用秒变客户端软件）

    - `chrome_200_percent.pak` 和 `chrome_100_percent.pak`：Chromium的UI资源包，分别用于高DPI和标准DPI环境。 - `resources.pak`：Electron的资源包，包含图标和其他非文本资源。 - `ffmpeg.dll`：FFmpeg的动态...

    .net framework4.8离线版安装包，解决证书过期问题

    2. WPF（Windows Presentation Foundation）增强：提供了更好的图形渲染和UI体验，包括高DPI支持和触控设备的改进。 3. Web Forms和ASP.NET改进：提升了Web应用程序的响应速度和用户体验，支持更现代的Web标准和技术...

    wke简洁风格UI界面源码-易语言

    wke库则是一个开源的Webkit引擎接口，它可以实现在应用程序中嵌入Web浏览器的功能，允许开发者创建具有现代网页渲染能力的用户界面。 【描述】"wke简洁风格UI界面源码" 暗示了这个源码包可能包含了一套设计简洁、...

    702全景太阳光插件，基于krpano 支持html5和flash 702全景图太阳光插件

    &lt;meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" /&gt; &lt;meta name="apple-mobile-web-app-capable" ...

    C#实现刻度尺包含像素和毫米

    首先，我们需要了解C#的基础知识，它是一种面向对象的编程语言，常用于开发Windows桌面应用、Web应用和移动应用。在C#中，我们可以使用Windows Presentation Foundation (WPF) 或 Windows Forms 来创建图形用户界面...

    dotNetFramework4.6.2.rar

    在.NET Framework 4.6.2中，Windows Presentation Foundation得到了显著的增强，包括图形渲染的优化、触摸和笔输入的支持、以及对高DPI显示器的更好适配，使得开发出的UI更加流畅且适应不同设备。 4. **ASP.NET...

    CEF3嵌入win32项目

    CEF3（Chromium Embedded Framework）是一个开源框架，用于在应用程序中嵌入 ...遵循上述步骤，你可以构建一个功能强大的、具备现代Web能力的桌面应用程序，同时解决系统兼容性问题，确保在Windows 10上顺畅运行。

Magicbox
Global site tag (gtag.js) - Google Analytics