自适应网页设计(Responsive Web Design)解析 (第一期)
来源:互联网 发布:阿里云怎么搭建网站 编辑:程序博客网 时间:2024/05/10 12:54
Responsive web design的概念 相信大家在网上也看到过许多相关的资料,下面我就根据自己最近对他的研究,分享一下他的几个重要点:
一、适用于不同移动设备自适应布局的主要思想:不同分辨率的设备引用不同样式,首先在自适应页面的头部加入如下代码:
<meta name="viewport" content="width=device-width, initial-scale=1" />
然后 通过不同分辨率引用不同样式:
@media screen and (min-width:320px) and (max-width: 480px)
上行代码是设定设备分辨率在 320px 到480px 之间的设备的样式,html页面中按照以上写法,就可以实现简单的自适应啦,大家可以试试奥
二、模块与模块之间的处理:
每个模块要设置相对宽度或者屏幕宽度的百分比,不可设定固定宽度。
模块与模块之间最好不要用定位,可用浮动控制模块的位置
概念大家都能查到,下面贴一个小例子:
<!DOCTYPE HTML><html><head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>自适应demo</title> <style> body{ max-width: 100%; } .s1{ float: left; } @media screen and (max-width:480px){ .s1{ max-width: 100%; } .s1 img{ max-width: 100%; } } @media screen and (min-width:481px) and (max-width:768px){ .s1{ width:45%; margin: 10px; } .s1 img{ max-width: 100%; } } @media screen and (min-width:769px){ .s1{ width:22%; margin: 10px; } .s1 img{ max-width: 100%; } } </style></head><body> <section class="s1"> <img src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg"> 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 </section> <section class="s1"> <img src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg"> 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 </section> <section class="s1"> <img src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg"> 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 </section> <section class="s1"> <img src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg"> 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 这是一个自适应的小例子这是一个自适应的小例子这是一个自适应的小例子 </section></body></html>
上面例子简单的引入的自适应网页设计的概念,大家可以缩放浏览器窗口查看自适应的效果。下一期将介绍几种图片自适应的写法和区别,谢谢
- 自适应网页设计(Responsive Web Design)解析 (第一期)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 自适应网页设计(Responsive Web Design)
- 对在读的学电子的同学提一点具体的建议
- MFC调用VLC
- 从子类访问父类的私有函数
- __iomem
- 求链表中倒数第k个结点
- 自适应网页设计(Responsive Web Design)解析 (第一期)
- 医疗电子领域医用传感器市场持续扩大
- TDI过滤驱动分析
- 多核处理器的九大关键技术
- 杂项设备miscdevice
- 用代码可以实现把jpg,png文件生成mbm文件
- OgreOde中SceneNode和Body的运动关系
- 图像放大并用双线性插值
- ARM处理器工作模式