最初のhtml 5+レスポンスページ
3246 ワード
暇で退屈な研究は応答式を研究し、html 5、応答式に対して半解である.
くだらないことは言わないで,直接コードをつけなさい.
1、meta IDの追加:ほとんどのモバイルブラウザはHTMLページを広いビュー(viewport)に拡大して画面解像度に合致する.ズーム禁止、デバイス画面幅の使用 ios、Anroid、クラウドOSにかかわらず、最も重要なのはviewportの設定 です. width=device-width幅はデバイス幅に等しく、事故の割合は1であり、ユーザーのスケールを禁止する. iosで を開始する.
2、卵痛のIEにhtml 5サポートを追加
3、応答コアcss 3-media-queries(http://webdesignerwall.com/tutorials/css3-media-queries)
4、html bodyの構築
5、スタイルと応答スタイルの追加
くだらないことは言わないで,直接コードをつけなさい.
1、meta IDの追加:ほとんどのモバイルブラウザはHTMLページを広いビュー(viewport)に拡大して画面解像度に合致する.ズーム禁止、デバイス画面幅の使用
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">apple-mobile-web-app-capableによりデスクトップフルスクリーンモード2、卵痛のIEにhtml 5サポートを追加
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->3、応答コアcss 3-media-queries(http://webdesignerwall.com/tutorials/css3-media-queries)
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->4、html bodyの構築
<body class="body">
<header class="header">
</header>
<section class="section clearfix">
<section class="section-1">
</section>
<aside class="aside">
</aside>
</section>
<footer class="footer">
</footer>
</body>5、スタイルと応答スタイルの追加
/*html5 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/*pc */
.body{ width: 1002px;margin: 0 auto;}
.header{ width: 1000px; height: 30px; margin-bottom: 10px; border: 1px solid #eee;}
.section{width: 1002px;}
.section-1{ width: 70%; height: 500px; border: 1px solid #eee; float: left;}
.aside{ width: 290px; height: 200px; border: 1px solid #eee; float: right;}
.footer{ width: 1000px; height: 30px; margin-top: 10px; border: 1px solid #eee;}
/* 1002px */
@media screen and (max-width: 1002px){
.body{ width: 100%;margin: 0 auto;}
.header{ width: 99.7%; background: #ccc;}
.section{width: 100%;}
.section-1{width:99.7%}
.section-1 img{ max-width: 110px;}
.aside{ display: none;}
.footer{ width: 99.7%;}
}
/* 800px */
@media screen and (max-width: 800px){
.body{ width: 100%;margin: 0 auto;}
.header{ width: 99.7%; background: #efefef;}
.section{width: 100%;}
.section-1{width:99.7%}
.aside{ display: none;}
.footer{ width: 99.7%;}
}
/* */
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both}
.clearfix{zoom:1}