@mediaでレスポンシブルを設計する

まず初期画面

mobileの場合は、1カラムで表示させたい。

amazonトップページのソースからcssを見るとどうやら、768pxと979pxで切り分けているので、メディアクエリ@mediaはひとまず768pxしたいと思います。

https://www.amazon.co.jp

@media (max-width:767px){.a-visible-phone{display:inherit!important}.a-hidden-phone{display:none!important}.a-hidden-desktop{display:inherit!important}.a-visible-desktop{display:none!important}}@media (min-width:768px) and (max-width:979px){.a-visible-tablet{display:inherit!important}

max-width:767pxの時は、float:leftとfloat:rightを解除します。

@media screen and (min-width: 767px) {
	#content{
	width:800px;
	margin:10px auto;
	}
	fieldset{
		border:1px #C0C0C0 solid;
	}
	h1 {
		display:inline;
	}
	#img {
		height:28px;
	}
	.form1{
	    margin-top: 1em;
	    padding: .5em;
	    size:80;
	}
	.submit1{
	    margin-top: 1em;
	    padding: .3em;
	}
	#owner{
		width:52%;
		float:left;
	}
	#map{
		width: 45%;
		float:right;
		height: 200px;
	}
}

@media screen and (max-width: 767px) {
	#content{
	width:75%;
	margin:5px auto;
	}
	fieldset{
		border:1px #C0C0C0 solid;
	}
	h1 {
		display:inline;
		font-size:18px;
	}
	#img{
		height:18px;
	}
	.form1{
	    margin-top: 1em;
	    padding: .5em;
	    size:25;
	}
	.submit1{
	    margin-top: 1em;
	    padding: .3em;
	}
	#owner{
		width:99%;
	}
	#map{
		width: 99%;
		margin-top:5px;
		height: 200px;
	}
}

一応、レスポンシブルになりました。
min768px

max767px