-1
안녕하세요. 저는이 반응 형 웹 디자인을 이해하려고 노력하고 있으며 개념과 구문을 이해하고 있습니다. 문제는 치수를 알아내는 것과 같은 방법을 알지 못하는 것입니다. div가 화면이 축소됨에 따라반응 형 웹 디자인을 시도하는 중
여기 내 예제 코드 나는 HTML에게
할 노력하고있어
<html >
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="teststyles.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link href="media-queries.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class = "container">
<div class = "Pictureholder">
<p> image here </p>
</div>
<div class = "Contentholder">
<p> Model #: Samsung Appliance NE595R1ABSR Compare
Samsung Appliance NE595R1ABSR 30" Freestanding Electric Range With 5 Cooktop Elements, 5.9 Cu. Ft., Self-Cleaning, Convection, Warming Drawer, 2 Chrome Oven Racks, LED, In Stainless Steel </p>
---------------------------------------------------------------------------------- ---------------------
<p> How Will My Product(s) Be Delivered? When purchasing a large appliance from AppliancesConnection, a representative will contact you 48 hours prior to arriving to your location to schedule a delivery date and a 4 hour time window. Upon delivery, your product will be unloaded and ready for you to open and inspect. If you have chosen White Glove service, the item will be placed in your room of choice and the debris will be removed.
</p>
</div>
<div class = "priceholder">
<p> Was this much money </p>
<p> this is how much it cost now </p> <Br><Br><Br><Br>
BUY NOW
</div>
</div>
</body>
</html>
CSS
.container{width: 990px; margin:0 auto 0 auto; position:realtive;}
.Pictureholder{ position: absolute; left: 500px; width: 300px; margin:250px 900px 0 0;display: block;}
.Contentholder{ position: absolute; right: 0px;width: 300px;background-color: #b0e0e6;margin:250px 900px 0 0;display: block;}
.priceholder{position: absolute; right: 0px;width: 300px;background-color: #b0e0e6;margin:250px 550PX 0 0;display: block;}
@media screen and (max-width: 980px) {
.Picturecontainer{
width:30%;
}
.Contentcontainer{
width:30%;
}
.pricecontainer{
width:30%;
}
}
@media screen and (max-width: 650px) {
.Picutrecontainer{
width:auto;
margin:0;
}
.Contentcontainer{
width:auto;
margin:0;
}
.pricecontainer{
width:100%;
margin:0;
}
}
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
}
그것에 대해 가지고하는 방법을 모든 팁을?
무엇 브라우저를 사용하고 있습니까? 디버거를 얻으십시오. 파이어 폭스 용 방화 광섬유를 사용하여 크기를 계산하는 아주 쉬운 방법입니다. – Revive
크롬에도 효과가 있습니까? – user2809321
꽤 확실한 크롬이 내장되어 있습니다 .. F12를 치십시오. 항상 저에게 효과적입니다. – Revive