頁面響應式布局CSS樣式通用代碼
技術支持服務電話:15308000360 【7x24提供運維服務,解決各類系統/軟硬件疑難技術問題】
<style type="text/css"> #container { width: 960px; margin: auto; } #wrap { width: 740px; float: left; } p { line-height: 600px; text-align: center; font-weight: bold; margin: 0 0 20px 0; } #main { width: 520px; float: right; background: yellow; } #sub01 { width: 200px; float: left; background: orange; } #sub02 { width: 200px; float: right; background: green; } /*--窗口1000px以上--*/ @media screen and (min-width: 1000px) { #container { width: 1000px; } #wrapper { width: 780px; float: left; } #main { width: 560px; float: right; } #sub01 { width: 200px; float: left; background: orange; } #sub02 { width: 200px; float: right; background: green; } } /*--窗口640px以上、999px以下--*/ @media screen and (min-width: 1000px) and (max-width: 999px) { #container { width: 640px; } #wrapper { width: 640px; float: none; } #main { width: 420px; float: right; } #sub01 { width: 200px; float: left; background: orange; } #sub02 { width: 100%; float: right; background: green; } } /*--窗口639px以下*/ @media screen and (min-width: 1000px) and (max-width: 999px) { #container { width: 100%; } #wrapper { width: 100%; float: none; } #main { width: 100%; float: right; } #sub01 { width: 100%; float: left; background: orange; } #sub02 { width: 100%; float: right; background: green; } } </style>