第一个响应式布局的简单页面

最新推荐文章于 2023-06-26 11:17:01 发布

xiaoxiao_xiaoliu

最新推荐文章于 2023-06-26 11:17:01 发布

阅读量533

点赞数

分类专栏： media 文章标签： css 响应式布局

本文链接：https://blog.csdn.net/xiaoxiao_xiaoliu/article/details/40304033

版权

media 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<body>

  <div class="header">
  <h1>Hello, my friends!</h1>
<h3>二级标题</h3>
</div>
<div class="content">
  <p>。。。</p>
<img src="top_20_gifts_02.jpg" />
</div>
<div class="footer">
  <p>。。。</p>
</div>

</div>

</body>

页面布局就是这种，最上面是标题，背景是用图片填充的，接下来内容部分是段落加图片，图片在屏幕超过图片大小时保持正常的大小，最下面是段落。

html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
.wrap{ width:100%;}
.header{margin:0; padding:0; border:none; font-family:Arial, Helvetica, sans-serif; background:url(top_20_gifts_02.jpg) no-repeat top left; background-size:100% 100%; }
.header h1{ padding:20px 0; margin:0; font-size:30px; line-height:40px;}
.header h3{ padding:10px; margin:0; font-size:20px; line-height:25px;}
.content{ font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px;}
.content img{ width:100%;}
@media screen and(min-width:600px){
.content img{ width:600px; height:430px;}
}
.footer{font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:20px;}

在不加第一行

html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}时，iphone在翻转屏幕时字体会发生变化，第一行还可以用

@media screen and (max-device-width: 320px){body{-webkit-text-size-adjust:none}}

@media screen and (max-device-width: 480px){body{-webkit-text-size-adjust:none}}

@media only screen and (-webkit-min-device-pixel-ratio: 2){body{-webkit-text-size-adjust:none}}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){body{-webkit-text-size-adjust:none}}

来替换，效果相同。后者出现居多。