CSS에서 픽셀로 작업하는 것이 좋지 않습니까?

CSS에서 픽셀로 작업하는 것이 좋지 않습니까? [닫은]

---

백분율 대신 CSS에서 픽셀 번호를 사용하는 것이 호환성 측면에서 나쁩니 까? 낮은 해상도는 어떻습니까? 1-100 범위에서 작업해도 괜찮습니까?

---

대답은 대부분 귀하의 상황에 따라 다르기 때문에 어려운 질문입니다.

픽셀은 그다지 나쁘지 않으며 주로 사용합니다. (때때로 글꼴 크기에 대해서도 마찬가지입니다.)
일반적으로 레이아웃의 외부 블록 요소를 지정된 크기 (고정 너비 레이아웃의 픽셀 및 유동 레이아웃의 백분율)로 고정하고, 내부 요소에서는 가능할 때마다 일반적으로 백분율을 설정합니다.

백분율이나 ems 로 스타일을 지정할 수없는 요소가 있습니다 . 특히 이러한 원칙을 이해하지 못하는 그래픽 디자이너가 만든 더 멋진 요소가 있습니다 .

예를 들어 사이트에 단순한 스타일의 열이있는 경우 너비를 백분율로 쉽게 설정할 수 있지만 배율을 염두에두고 설계되지 않은 특정 너비의 배경 이미지가있는 경우보기 만 좋습니다. 고정 너비로. 이러한 경우 페이지의 나머지 부분이 나머지 너비를 올바르게 차지하는지 확인해야합니다.

백분율이있는 픽셀을 함께 사용할 수 있습니다.
예를 들어 다음은 내 최신 웹 앱 중 하나의 스 니펫입니다.

min-width: 800px;
width: 80%;
max-width: 1500px;

선택은 또한 달성하려는 디자인 또는 레이아웃에 따라 다릅니다.

A에 대한 고정 폭 레이아웃, 픽셀 값은 미세하다. 디자이너가 크기를 조정하는 방법에 대해 생각조차하기에는 매우 복잡한 정말 멋진 내용이 포함 된 포토샵 이미지를 제공하는 경우 반드시이 작업을 수행해야합니다.

레이아웃이 동적 이어야하는 경우 백분율을 사용하여 해상도가 변경됨에 따라 확장되는지 확인하고 위의 코드 스 니펫을 사용하여 그렇지 않으면 미친 것처럼 보일 수있는 시나리오에서 더보기 좋게 만들 수 있습니다.

일부 레이아웃 (예 : StackOverflow가 모든 공간을 차지한다고 상상해보세요)은 예를 들어 너비에서 매우보기 흉할 것입니다. 1920 픽셀-선 너비가 너무 커서 읽기가 매우 불편할 것입니다.
이것은 무엇 max-width을위한 것입니다. 일부 동적 레이아웃에서도 유용성과 가독성을 극대화하려면 사이트의 최대 너비를 제한해야합니다.

또한 더 작은 화면도 고려하십시오.
더 이상 800x600 데스크톱을 사용하는 사람은 없지만 많은 사람들이 해상도가 더 작은 모바일 장치로 웹을 탐색합니다.
이것이 min-width목적입니다. 동적으로 확장 된 레이아웃을 작은 해상도에서 덜 복잡하게 보이게하는 것입니다.

이게 도움이 되길 바란다.

편집하다:

스매싱 책은 주제에 대한 몇 가지 아주 좋은 생각을 가지고있다.

편집 2 :

내 게시물이 방문자에게 픽셀 기반 크기 조정을 강요하는 것처럼 들리는 것을 원하지 않습니다.
(분명히 댓글의 일부 사람들이 그런 식으로 나를 오해했습니다.)

정리하려면 :

이상적인 레이아웃은 가능한 모든 해상도 나 설정에 잘 적응하는 레이아웃이라고 생각합니다.
그러나 우리는 항상 모든 것을 완벽하게 할 수는 없습니다. 시간 / 리소스 및 대상 고객은 사이트에 고급 기능이 필요한지 여부를 결정하는 열쇠입니다.

나는 당신이 주어진 직업에 옳은 것을 사용하도록 제안하고 있습니다.

사이트에 대한 고급 조정이 필요한 방문자가 상당 할 사이트를 개발하는 경우 그만한 가치가 있습니다.
(물론, 때때로 우리는 일을 옳은 방식으로하는 느낌을 갖기 위해 우리 자신을 위해 그렇게하지만 항상 재정적으로 건전한 결정은 아닙니다.)

그래도 레이아웃을 결정하기 전에 어떤 종류의 사이트가 될지, 누가 방문자가 될지 등에 대한 적절한 조사를해야하며 레이아웃을 유동적으로 만들거나 더 동적으로 만드는 것이 가치가 있는지 여부를 결정해야합니다.

---

모든 측정에는 고유 한 목적이 있습니다.

• 테두리와 같은 픽셀 기반 사물에 픽셀을 사용 합니다. 1.3422 픽셀 너비로 끝나는 테두리는 원하지 않을 것입니다.

• 콘텐츠 영역, 레이블 및 입력 상자와 같은 텍스트 기반 항목 에는 텍스트 중심 측정 (em, ex)을 사용합니다 . 특정 길이와 너비의 텍스트를위한 공간을 확보하는 쉬운 방법입니다.

• 열과 같은 창 기반 항목 에는 백분율을 사용 합니다.

물론 예외가 있습니다. 예를 들어 최소 열 너비를 픽셀 단위로 지정할 수 있습니다. 그러나 위의 내용을 따르면 페이지가 잘 확장됩니다. 항상 페이지를 확대 및 축소하여 다양한 글꼴 크기와 브라우저 모양에서 어떻게 작동하는지 확인하십시오. 나중에 놀라지 마십시오.

---

글꼴 크기

CSS에서 픽셀로 작업 할 때 발생 하는 문제 를 먼저 이해해야 한다고 생각합니다 .

• 이전 브라우저의 확대가 손상되었습니다. 예를 들어 IE6 및 IE7은 확대 / 축소 할 때 텍스트 크기를 조정하지 않습니다 . 선 높이도 기발 할 수 있습니다. 이러한 문제는 최신 브라우저에는 존재하지 않지만 많은 사람들이 글꼴 크기에 픽셀을 사용하지 않는 이유입니다.
• 글꼴 크기를 픽셀 단위로 지정하면 모든 사람이 동일한 크기의 텍스트 를 보게 됩니다 . 브라우저는 단락의 기본 크기가 16px이므로 em및 기타 상대적 크기 만 사용하는 경우 이를 변경하는 사용자 의 결정 을 존중합니다 . 이것은 특히 더 오래된 사용자가있는 경우 텍스트가 많은 사이트에서 특히 중요합니다. 반면에 사이트의 디자인이 중요한 경우에는 px사용성을 해치지 않고 글꼴 크기를 지정 하는 것이 가능하고 정당하다고 생각합니다 .

결국 결정을 내릴 필요가 있으며 정확한 상황에 따라 다르지만 글꼴 크기를 픽셀 단위로 지정하는 것은 괜찮다고 생각합니다 .

작업 할 때 그런데, em글꼴 크기를 지정이다 좋은 생각 (가) 설정 body에 font-size: 62.5%. 즉, 기본 글꼴 크기는 10px이므로 1em은 10px, 1.6em은 16px 등으로 ems를 사용하여 디자인하는 동안 픽셀 로 생각 하기가 더 쉽습니다 . 특히 ems의 값이 캐스케이드 될 때 이렇게 작업하는 것이 여전히 실망 스럽습니다. 이를 도와주는 PXtoEM.com 과 같은 매우 편리한 사이트가 있습니다 .

레이아웃 문제

화면은 픽셀 기반 레이아웃 이므로 픽셀은 여러 가지 직관적 인 선택입니다. 여기서 주요 문제는 사용자 마다 화면 크기 가 다르다는 것 입니다. 다른 사람들이 지적했듯이 퍼센트 와 함께 min-width및 max-width픽셀을 사용 width하는 것은 화면 크기를 존중하는 동시에 매우 작고 큰 창에서 사이트가 부당하게 찌그러 지거나 늘어나는 것을 방지하는 유용한 방법입니다.

However, I would generally avoid this approach in favour of CSS media queries. You can then use fixed width chunks and make the layout wider (amongst other things) as the screen size increases. However, CSS media queries, like all cool web technologies, suffers from lack of browser support. Most notably, IE8 and earlier do not support them, although there are JavaScript fixes. On the other hand, the iPhone and other handheld devices do support them, and I would strongly recommend them if you want your site to look nice on these devices.

I think fixed width grids are fine. Fixed width grid systems like 960 Grid System are popular enough in their own right, and there are so many other sites that have a fixed width, that I doubt you would hear many complaints if you did this. Handheld devices that do not have large screens are an issue, but this is where CSS media queries should be used, so it is possible to specify everything in pixels and have your site looking beautiful on the desktop and on the iPhone.

Conclusion

Ultimately, everything depends on who your users are, what you need to support, and what you want your site to look like, but there is nothing inherently wrong with using pixels in CSS.

---

That depends on what you are styling. For columns for example, the width should probably depend on the text size to ensure that it will look optimal on multiple resolutions/screens. If you want to divide your page in two parts, you should use percentages. But if you want a 1px border between these two parts, independent of the resolution, use pixels.

---

Basically it depends on who's hiring you and consequently the audience of your work. For institutional purposes (where content should prevail over the shape, like a goverment project), you better work with .em or %, they are harder to control, but they will be really user friendly in terms of accessibility.

If we talk about corporative Websites (Where shape is the deal) pixel will be a more accurate tool to fulfill your customer expectation regarding his brand. A liquid interface (%, .em) is always a good stuff when it is smartly done, but don't forget to check your design under extreme conditions and be sure that it will be stable.

If you work with pixels, you will have absolute control over the final look of your site, but you will have to assume the impossibility for some user's to operate with it efficiently.

Best option: rather than designing a Website compatible for all platforms (what will result in a multi-deficiency design) suggest your customers special versions of the site adapted for every demand, what is a better practice and a better business for a designer too...

---

I would say avoid it if possible except for in certain cases.

For instance for a thin border it's ok to just specify 1px.

Also for max- and min- style attributes it is ok. But then make the non-max/min attribute be a percentage if possible.

---

This really is a good question which I have asked many times before. Not being a hardcore web designer (I'm more on the development side) I've usually asked the designers I work with about their opinions, and here is what I have distilled:

Using percentages vs pixels for sizing elements and so on is really a matter of personal taste or the requirements in each specific case. If you need it to scale, or it will scale well, use percentages. If not, use pixels. People here have used the examples of major columns in a page maybe needing to be fluid but borders may well need the precision of a pixel measurement.

Obviously sizing images is pretty much tied to their resolution and pixel units, so I always use them in this case.

However, using em sizing versus pixel or even point sizing for text is a whole different kettle of fish. Most of the guys I work with have a base reset style for font sizes which brings the size of 1em down to about 12px. They then use ems everywhere else (or as near to everywhere else as is possible) to size text elements, form controls and the like. This is how I operate now too as it seems to work well across a variety of browsers, OSes and DPIs on desktops and laptops. I can't vouch for mobile devices though.

Accessibility is the key though - if you need to make something usable for people with disabilities or work on a variety of devices out the box, even things you may consider old, then scaling will be a requirement. Build it into your model for designing the site from the get-go and you may realise that absolute pixel sizing is not even needed in that case.

For example, an art-heavy design is probably going to be designed at a single scale, but the new educational website for disabled users is going to have to work in a variety of situations.

Just remember, the W3C put a variety of methods for sizing and scaling into their specifications for a reason - flexibility. Do whatever fits best and works well for your audience (as Moustard said earlier).

---

I'm not a css/html expert but convention I use is to use pixels for the outer containers and percentages for the inner objects.

Another rule of thumb I have with anyone reviewing my layout is a Three Pixel Rule. It is rare that everything will line up exactly within every browser out there. We've agreed the effort outweighs the benefits to move anything three pixels or less.

---

Do the right thing by default. If a user visits your site with javascript disabled and no preference cookies, you should serve them a web page that is as functional and accessible as possible.

Your default stylesheet should assume nothing about the browser window, and still render a functional page, however hideous, down to 320x320 resolution, and up to unbounded sizes. If photographic fidelity is so important that you can't trust browser scaling, and sometimes it is, then you should use pixel measurements (at least minimums) for elements encapsulating images of fixed size, to make sure that you don't end up with important things being covered up. Specifying minimum widths along with percentages should give you the control you need while giving your users the accessibility they need. Even if accessibility isn't an issue now, it will be later if the site is successful.

When you do know more about the browser window, then it's okay to use fixed widths in alternate stylesheets, if the importance of preserving the design justifies the added work.

---

If you're targeting a fixed size then pixels are fine. But if you want your layout to look good on various resolutions/screen sizes, then you should stick to more relative measures like percentages. Most folks are targeting the latter.

---

It is ok if that is what it takes to please your client. Most of the time, you can't balance the amount of space in diverse screen sizes with only percentages. CSS3 media queries helps here but adoption is still problematic.

---

I prefer pixel in most cases. For example - default width of content ares: 960px. In "1024" it will be ok, with small free spaces on the both side of the screen. Put some gradient or background there. In "1280" or "1440" or "1680", or whatever - there will be bigger and bigger gap, but it will look nice. Yep, for 800 - this site will be ugly. But who cares? Every major players dropped support for 800. There are too few people with this resolution..

There are many various sites, where %% will be much better solution, though.

---

The building blocks of a screen are pixels. You can't go wrong with fixed pixel sizes. As other posters have mentioned, you can also use percentages or "em"s for a scalable substitute.

참고URL : https://stackoverflow.com/questions/2915508/is-it-bad-to-work-with-pixels-in-css