如何做一个自适应网页
如何做一个自适应网页?
1、允许网页宽度自动调整
<meta name="viewport" content="width=device-width, initial-scale=1" />
网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
2、不能使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。具体说,CSS代码不能指定像素宽度:
width:xxx px;
只能指定百分比宽度:
width: xx%;
或者
width:auto;
3、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {font-size: 1.5em; }
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {font-size: 0.875em;}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。
4、流动布局(fluid grid)
"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {float: right;width: 70%; }.leftBar {float: left;width: 25%;}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position: absolute)的使用,也要非常小心。
5、选择加载CSS
"自适应网页设计"的核心,就是CSS3引入的Media Query模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css"media="screen and (min-width: 400px) and (max-device-width: 600px)"href="smallScreen.css" />
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
6、CSS的@media规则
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {.column {float: none;width:auto;}#sidebar {display:none;}}
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。
7、图片的自适应(fluid image)
除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}
老版本的IE不支持max-width,所以只好写成:
img { width: 100%; }
此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令:
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {var imgs = document.getElementById("content").getElementsByTagName("img");imgSizer.collate(imgs);});
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。
如何做一个自适应网页相关推荐
- 要求做一个从网页上导入excel
要求做一个从网页上导入excel,,开始着手去实现它. 思路很简单: 1.做一个jsp页面,页面包括浏览文件,提交文件 2.将excel文件上传到服务器 3. 服务器对该excel文件进行读出 4. ...
- 一步步做一个Google 网页
一步步做一个Google 网页 做一个Google 图标 其实谷歌很用心的在做每一个Google图标.然而我太懒,搞了个简单的. h1{font-size:100px; color:#5f5f61; ...
- 做一个简单网页(做一个简单网页多少钱)
怎样做一个简易的网页?做一个简单网页多少钱 做一个简易的普通网页比较容易.当然,制作的方法有好几种,有的是直接写代码.有的是用绘图软件绘制页面再导出网页.常用的是使用网页制作软件做网页.下面以普通静态 ...
- Java怎么做一个简单网页呢?
学java的同学在接触到Java web开发之后都跃跃欲试想要尝试自己开发一个页面,那么应该如何操作呢?都需要使用到哪些技术呢?下面小千就来告诉你. 需要使用到的技术 java 语言知识, jsp 知 ...
- java如何做网页_java怎么做一个简单网页?网页包括什么?
学了java程序之后,大家就可以将这些运用到生活中去,比如做一个简单的网页.正好也可以检测自己学了怎么样,那么接下来,我们就来给大家讲解一下这方面的内容. 用Java语言编写实现一个简单的WEB浏览器 ...
- 做一个前端网页送给女朋友~轮播图+纪念日
文章目录 1. 轮播图框架 2. 轮播图大盒子实现 1. 盒子及图片的可视化 2. 将图片重叠起来并放入轮播图盒子中 ...相对定位与绝对定位 3. 添加左右按钮 4. 点击按钮跳转图片 5. 鼠标离 ...
- 如何做一个统计网页访问量的功能
在H5中,由于提供了相应的web客户端存储数据的方法,所以不用利用传统的追踪cookie的方法,实现更加高效,简单. HTML5中两种web存储的方法: localStorge-提供没有时间限制的we ...
- 用html5做一个简单网页_用新款ws2812灯带做一个简单的窗花
本文转自:DF创客社区-未经许可不可转载 原文链接(附件请于原文下方下载): 用新款ws2812灯带做一个简单的窗花-创意生活论坛-DF创客社区mc.dfrobot.com.cn 作者:屌丝王小明 ...
- 用html5做一个简单网页_用Python做一个简单的翻译工具
编程本身是跟年龄无关的一件事,不论你现在是十四五岁,还是四五十岁,如果你热爱它,并且愿意持续投入其中,必定会有所收获. 本文就来自编程教室一位"小"读者的投稿(互助学习1群里的同学 ...
最新文章
- mysql 获取倒数第二_如何从MySQL中的表中获取倒数第二条记录?
- jquery.js把我的时间修改了为什么?_电气老手在PLC程序调试修改时的几个必备小窍门,看你知道几个?...
- 【Cocos2D-X 】初窥门径(9)播放音乐/音效
- size_t,__T,_T,TEXT,_TEXT等一些特殊宏的理解
- 拷贝构造函数和赋值构造函数的区别
- 项目经理如何做好风险管理
- 汇总了25个FPGA开源网站和前10大FPGA论坛
- cobalt strik启动
- 根据上面的products列表写一个循环,不断询问用户想买什么,用户选择一个商品编号,就把对应的商品添加到购物车里,终用户输入q退出时,打印购买的商品列表。
- [Python从零到壹] 四十五.图像增强及运算篇之图像灰度非线性变换详解
- 大学生月入过万的创业好项目——自媒体
- 软考可以不考初级直接考中级吗?
- js 删除字符串中第一个逗号
- Java数据结构学习——排序二叉树
- Elasticsearch:什么是相关性
- 卡西欧电子计算机怎么换电池,卡西欧电池怎么换
- matlab errorbare,Matlab – Rhapsody of the Universe
- 怎么判断各种值是不是为空
- 史上最全鱼骨图分析法
- 手把手教你如何搭建用户触达体系!
热门文章
- 东方博宜OJ 1037 - 【入门】恐龙园买门票
- html 文字倒映效果,如何用css实现文字渐变倒影?求教怎么做?
- ionic监听android息屏和后台运行的生命周期
- 第02章 Python语法基础,IPython和Jupyter Notebooks--Python for Data Analysis 2nd
- 基于python的深度学习框架有_从Theano到Lasagne:基于Python的深度学习的框架和库...
- 自动化测试脚本--测试百度搜索Selenium
- 计算机应用 行动计划范文,制定计算机学习计划范文
- PD芯片在OTG设备的角色应用及OTG发展历史
- 2022年最新上海道路货物运输驾驶员模拟真题题库及答案
- 产品窜货是什么意思?怎么防止窜货行为?