码迷,mamicode.com
首页 > 其他好文 > 详细

响应式布局基本实现

时间:2016-09-28 19:23:33      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

CSS3中的Media Query(媒介查询):

  设备宽高:device-width,device-height

  渲染窗口的宽和高:width,height

  设备的手持方向:orientation

  设备的分辨率:resolution

使用方法:

  外联

  

<link href="css/bg.css" type="text/css" rel="stylesheet" media=" only screen and (max-width:600px)" >
<!--
media=" only screen and (max-width:640px)"
当屏幕最大宽度为640时才会显示
-->

  内嵌样式

<style type="text/css">
@media screen and (min-width:600px){
body{
background-color: fuchsia;
}
}
</style>

响应式布局基本实现

标签:

原文地址:http://www.cnblogs.com/wujieBlogs/p/5917360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!