响应式布局-初级

首先要是做浏览器在手里中的适配

<meta name="viewport" content="width=device-width, initial-scale=1">

写法

<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width:600px)
    and (max-width:800px)">
<link rel="stylesheet" type="text/css" href="styleA.cc"
    media="screen and (min-width:400px)">
<style type="text/css">
      @media screen and (max-width: 600px) { /*当屏幕尺寸小于6600px时,应用下面的css样式*/
        .class {
            background-color: #ccc;
        }
      }
    </style>
<link rel="stylesheet" type="text/css" href="iphone4.css"
    media="only screen and (-webkit-min-device-pixel-ratio:2)
    ">
    /*(orientation:portrait)横向 (landscape)*/

HACK

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script  src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

注意事项

html {
    font-size:62.5%; /*font-size:2rem==font-size:20px*/
}

移动要设置好最好宽度(min-width)、最大宽度(max-width)

宽度一定要设置成百分比,不要设置成固定像素

box-sizing:border-box;/*标准和和模型设置好就不会把里面的内容给压坏*/
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,024评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,868评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • 夕阳抹红了记忆 燃烧了牵牛花 开成思念的喇叭 爬上了墙头 等待晚风 轻轻推开你的窗 若你还在翻阅 已发黄的日记 请...
    陈大仙儿_英姐阅读 251评论 0 3
  • 什么是API? 应用程序编程接口 是编程指令集合和访问软件应用程序的标准。通过一个 API,您可以利用 API 提...
    love2013阅读 244评论 0 0