如何设计分辨率独立的CSS元素? [英] How to design resolution independent CSS elements?

问题描述

我是Web开发的新手.我的系统分辨率为1280 * 800.当我设计CSS元素时，我必须给正子指定像素.如果我为我的分辨率而设计，则同一页面可能看起来很小.

如何设计与分辨率无关的CSS元素

解决方案

要做的第一件事是为网站提供一个最低分辨率，而无需水平滚动.请参考 W3学校作为指南；他们目前报告至少93％的浏览器的分辨率为1024x768或更高，因此这是一个不错的起点.

下一步是确定固定宽度与可变宽度.例如，如果所有机器都以与您在上面定义的最小分辨率兼容的相同固定宽度渲染站点，或者元素应该在水平可用的整个空间中流动.固定宽度选项更容易预测，但可变宽度可以更好地利用屏幕空间.

最后，尝试避免显式宽度或沿可变宽度路径的左/右定位.这对于某些页面元素(例如始终以相同宽度呈现的导航列)是很好的，但其他元素(例如主页内容)则需要扩展到任何显式边界之外.最好的选择是定义父容器的宽度(它可能只是100％，无论如何是div元素的默认值)，然后允许子元素填充容器，并让浏览器相应地呈现宽度./p>

I am new to web development. I have 1280*800 resolution in my system. When i design CSS elements,i have to give positons interms of pixels. If i design for my resolution, the same page may look big in small moniors.

How can i design resolution independent CSS elements

解决方案

The first thing to do it pick a minimum resolution for the site to support without horizontal scrolling. Refer to W3 Schools as a guide; they’re currently reporting at least 93% of browsers at 1024x768 or greater so that’s a good place to start.

The next thing is decide on fixed versus variable width. For example, should all machines render the site at the same fixed width compatible with the minimum resolution you defined above or should the elements flow across the entire space available horizontally. The fixed width option is more predictable but variable width makes better use of screen real estate.

Finally, try to avoid explicit width or left / right positioning of you go down the variable width path. This is fine for some page elements such as a navigation column which always renders at the same width but other elements such as the main page content need to expand beyond any explicit boundaries. The best option is to define the width of a parent container (it may just be 100% which is the default for a div element anyway), then allow the child elements to fill out the container and let the browser render the width accordingly.

这篇关于如何设计分辨率独立的CSS元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！