문제가 있습니다. 나는 간단한 wap-site http://tornet.ml을 가지고있다. 휴대 기기에서는 사이트가 완벽합니다. 그러나 PC에서 브라우징 할 때 이미지는 흉포하게 보입니다. 절대 크기 (px) 대신 상대 크기 (%)를 사용하여 화면 크기가 변경되므로 이미지의 크기를 조정합니다. 이미 존재하는 것보다 더 완벽하게 만들 수있는 방법이 있습니까?다른 장치의 이미지 크기
도움이 될 것입니다.
Media Query을 사용하면 웹 사이트에 액세스하는 데 사용되는 다양한 기기에 대해 다른 스타일 시트를 사용할 수 있습니다.
@media screen and (min-width: 400px) {
h1 {
background: black url('test.jpg') no-repeat 50% 50%;
}
}
스타일 시트는 폭 400 픽셀의보다 큰 화면에 적용 할 수 있음을 의미하십시오 <style> 태그 내부에 다음과 같이 쓸 수 있습니다.
<link href="screen.css" rel="stylesheet" media="screen">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 480px)">
을 그리고 이전의 스타일에, 일반적으로 모바일 기기, 데스크톱과 후자에 CSS를 추가
당신은 또한 다음과 같은 구문을 사용하여 외부 스타일 시트를 지정할 수 있습니다. 미디어 쿼리에 대한 자세한 내용은 http://www.w3.org/TR/css3-mediaqueries/
또한 픽셀 대신 %를 사용하고 픽셀을 사용하지만 사용중인 장치에 따라 변경해보십시오.
당신은 당신이에 표시되는 화면의 종류에 따라 변경 사이트의 레이아웃을 원하는 문제를 직면하고있다. 그렇게 할 수있는 레이아웃은, 적응 또는 반응 레이아웃이라고이며 일부 고급 CSS 지식을 사용하여 수행 할 수 있습니다.
확인이 잘 기사 : - 선택할 수있는 다양한 프레임 워크가있다 물론 http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
는 자신의 모든 것을 구현하는 실제 필요가 없습니다.
확인 선발이 목록 : http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
그러나, 특정 사건에 대한 간단한 해결 방법은 콘텐츠의 폭을 제한하는 것, 그래서 노트북/PC에서 스트레칭되지 않습니다. 내가 무슨 말을하고 있는지 보려면 <body> 태그를 <body style="width:500px;">으로 변경하십시오.
답변 중 일부는 적응 형/반응 형 레이아웃/디자인을 찾고 있음을 언급했습니다. 또한 레이아웃을 기반으로 다른 해상도 이미지를 표시하려면 ''요소 http://html5hub.com/html5-picture-element/ 및 polyfill : https://github.com/scottjehl/picturefill을 확인하십시오. –
HJ05