弹性图片
img{ max-width:100%};
优点： 可以根据不同的可视宽度动态缩小或放大，可以使用不同的分辨率
缺点： 必须保证图片的大小，小于可视容器的大小；
- 处理图片缩放的方法
简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }
用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 CSS3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性和 HTML 自定义属性的功能：
HTML 结构：
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
CSS 控制：
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
标签
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,user-scalable=no">
width=device-width ；宽度：设备的宽度;
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
构造布局模式
使用@viewport与媒体查询
在不同的条件下写出不一样的css,复写，但是加载条件不一样，适应性强，
- 不同条件使用不同的样式表
‘ ‘’
当屏幕宽度小于480px 时，加载sherland.css 文件
- 优化： 可以将媒体查询建立在同一个样式列表里面
Smartphones (portrait and landscape) 智能手机 的（纵向和横向）
@media only scree and (min-device-width : 320px) and (max-device-width : 400px) {
//styles
}
Smartphones (landscape) 横向
@media only scree and (min-width : 321px){ //styles }Smartphones(protrait) 纵向
@media only scree and(max-wiwdth: 320px){
//styles
}
ipad 端
@media screen and (orientation: landscape){ //横屏
.ipadLandscpe{
width:30%;
float:right;
}
}
@media screen and(orientation :portrait){ //竖屏
.ipadportrait{
clear:both;//清除浮动
}
}
兼容ipad 和 iphone 的视图效果
` / iPad /
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/ iPhone /
@media only screen and (min-width: 320px) and (max-width: 767px) {} `
学会隐藏内容
display : none;
通过JS判断当前硬件屏幕规格 ，如果是小屏幕，则隐藏大块面积的内容，变为链接 (我们可以隐藏掉大块的文字内容区，而只显示一个简单的导航结构，其中的导航元素可以指向详细内容页面。)
注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现 ;但是还是占据位置；
注意事项
- 尽量不要使用绝对宽度 ，和绝对大小 ;例如 px; 使用 百分比 (%) ;
- 字体使用 em 或者 rem(不只是局限于字体，图片、边框宽度都可以使用);em 是相对父级元素的大小确定的,rem相对于根元素；
流动布局 fluid grid
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的