移动web(四)响应式布局、媒体查询
来源:互联网 发布:磁卡充值系统java 编辑:程序博客网 时间:2024/06/05 11:33
移动web(四)响应式布局、媒体查询
1、响应式布局的概念
一个网站可以兼容多个终端
2、响应式网站和传统pc端之间的差异性
1)内容差异(响应式网站内容相对较少,而pc端相对较多)
2)布局上的差异(响应式的布局较为简单,而pc端布局较为复杂)
3)兼容性上的差异(响应式网站兼容会较差,而pc端没有兼容问题)
注:这个兼容说的是浏览器的兼容
3、媒体查询
1)作用:针对不同的屏幕大小链接不同的css样式2)方式:外链式媒体查询、内嵌式迭代写法
4、外链式媒体查询
直接在html文件里面用link标签配合media属性实现媒体查询
<link rel="stylesheet" href="red.css" media="(min-width:980px)"><link rel="stylesheet" href="green.css" media="(max-width:979px) and (min-width:540px)"><link rel="stylesheet" href="blue.css" media="(max-width:539px)">
说明: px后面一定不能跟分号,区间与区间之间用and关键字链接,前后必须要有空格
弊端: 1)每一个css都是独立的,修改起来不方便 2)css太多了,请求就多了,不利于优化
5、内嵌式迭代媒体查询
写在css里面,利用media关键字实现媒体查询
@media (判断条件) { css语句 }
小技巧:先写最大范围的css,然后用小范围的css去覆盖掉一些我们要修改的css
6、Bootstrap
中文官网:http://www.bootcss.com/
是一个UI框架,两个很牛的人写了一堆(下拉菜单,导航,按钮.....并且还具备JS特效),我们只需要引入这个框架,并且复制它的结构代码就能实现某些功能,并且同时具备栅格化(自动响应式)。什么时候运用?(1)没有设计图的时候 只有原型图(2)项目比较赶(3)制作一些简约类型的网站的时候,说白了就是跟bootstrap提供的风格很类似的时候的网站可以去运用(4)不适合一些定制类的网站,或者一些复杂的网站,例如电商这种的,更适合做一些企业站或者后台管理系统界面
阅读全文
0 0
- 移动web(四)响应式布局、媒体查询
- 响应式布局-----媒体查询
- 媒体查询,响应式布局
- 媒体查询响应式布局
- 响应式布局 媒体查询
- 响应式web-媒体查询
- 响应式布局之媒体查询
- 响应式布局之媒体查询功能
- 媒体查询——响应式布局
- 响应式布局之媒体查询
- html响应式布局_媒体查询
- 用媒体查询@media做【响应式】布局应用于【web app】
- css3媒体查询实现网站响应式布局
- css3媒体查询实现网站响应式布局
- 响应式布局 媒体查询 media query的用法
- 12媒体查询和CSS3响应式布局
- 响应式布局 css3 media 媒体查询 和js+rem
- 响应式布局:CSS3媒体查询Media Queries
- 走进二极管的世界
- PostgreSQL配置文件--资源使用(除WAL外)
- php中的序列化
- Arduino语音天气预报(三)
- java.lang.InterruptedException: sleep interrupted
- 移动web(四)响应式布局、媒体查询
- Delphi类型区分——集合
- java的设计模式——几种工厂模式
- java学习笔记之 设计模式-套路
- 网络数据读取框架
- tomcat 下的连接文件不能访问解决办法
- 策略模式
- 阿里云ECS服务器用了哪些CPU,值多少钱
- spring aop 中@annotation()的使用,关于自定义注解,绝壁原创的文章