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

响应式笔记(1)

时间:2017-01-14 15:42:53      阅读:290      评论:0      收藏:0      [点我收藏+]

标签:原则   最好   显示   idea   span   条件   响应式   ati   常用   

一、媒体查询:媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

语法

1 @media mediatype and|not|only (media feature) {
2     CSS-Code;
3 }

实例

如果文档宽度小于 300 像素则修改背景颜色(background-color):

1 @media screen and (max-width: 300px) {
2     body {
3         background-color:lightblue;
4     }
5 }

关键字包括and-与,or(逗号)-或,not-非,only
not只到逗号位置有效
only 老旧浏览器解析到@media all/scree/print为止,后面的条件会被忽略,当针对某个设备应用媒体查询时,最好带上only

技术分享

媒体属性最常用的4个,可添加min-或max-前缀

1.width:视口宽度
2.height:视口高度
3.device-width:渲染表面的宽度,就是设备屏幕的宽度
4.device-height:渲染表面的高度,就是设备屏幕的高度

二、视口(viewport)

  • 布局视口(layout viewport):先用虚拟的一个宽度将网页布局出来,这个视口大小不变
  • 可视视口(visual viewport):手机上呈现出的宽度,用户的缩放可改变其大小
  • 理想视口(ideal viewport):指布局视口在一个设备上的最佳尺寸
  • 理想视口(ideal viewport):指布局视口在一个设备上的最佳尺寸

举例:书的布局视口,手机像放大镜可以放大书的局部,手机屏幕就是可视视口

理想视口使用方法:

<meta name="viewport"  content="width=device-width">

三、响应式网站设计原则

1、渐进增强和优雅降级

渐进增强 progressive enhancement :先简单效果,再根据不同浏览器不同分辨率逐渐追加效果

优雅降级 greceful degradation :先做到优雅的效果,在根据不同浏览器不同分辩率逐渐减少效果。

优雅降级更好,针对用户体验来说,思想是让老浏览器可以用,新的浏览器体验更好

2、根据用户使用比例来确定大小屏幕实现顺序

技术分享

3、断点的选择

  • 小屏幕:0-480px
  • 中屏幕:481-800px
  • 大屏幕:801-1400px
  • 巨屏幕:1400+px

 

响应式笔记(1)

标签:原则   最好   显示   idea   span   条件   响应式   ati   常用   

原文地址:http://www.cnblogs.com/tgxh/p/6285346.html

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