标签：gre content ado 根据 需要 scale 版本 简单 智能手机
响应式布局是一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本
@media all(用于所有的设备) || screen (用于电脑屏幕,平板电脑,智能手机等) and|not|only(三个关键字可以选)
1 <head> 2 <style media="screen"> 3 @media screen and (max-width:600px){ 4 .con{ 5 background:red; 6 } 7 } 8 @media screen and (min-width:600px) and (max-width:800px){ 9 .con{ 10 background:blue; 11 } 12 } 13 @media screen and (min-width:800px){ 14 .con{ 15 background:green; 16 } 17 } 18 .con{ 19 width: 100%; 20 height: 100px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="con"> 26 一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本一个网站能够兼容多个终端---而不是为每个终端做一个特定的版本 27 </div> 28 </body>
1.meta 标签
最简单的处理方式是加上一个 meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1">
其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。
2.使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。
3.media query
css2 允许用户根据特定的 media 类型定制样式，基本语法如下
@media screen and (max-width: 360px) { html { font-size: 12px; } }
意思就是： 当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。
有一个需要注意的点是范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。
响应式布局
标签：gre content ado 根据 需要 scale 版本 简单 智能手机
原文地址：https://www.cnblogs.com/jing-tian/p/10987494.html
