深圳外贸网站建设,网站访问pv量是指什么,跨越网站建设科技有限公司,做视频找素材的网站有哪些随着高科技的发展#xff0c;现在我们浏览网页不在局限于PC机上了#xff0c;用户可使用上网的设备是越来越多的品种#xff1a;手机、小笔记本、iPad、Playbook#xff0c;以及PC机#xff0c;而且PC机的显展大小各不一致。这样一来不同的屏幕分辨率范围就产生了#xf…随着高科技的发展现在我们浏览网页不在局限于PC机上了用户可使用上网的设备是越来越多的品种手机、小笔记本、iPad、Playbook以及PC机而且PC机的显展大小各不一致。这样一来不同的屏幕分辨率范围就产生了320px至2560px不等。换句话说以前我们那种固定布局的设计所受的局限性就越来越大了。为了能让我们制作出来的Web页面能适应这些设置就需要一个适应性的设计需要能自动调整以适应所有显示分辨率和设备的布局
目标效果
在开始之前我们先来看一个DEMO效果大家慢慢缩小你的显屏你将会看到不同的布局效果来适应你的显屏大小 概述
对于显屏大于1024px宽度来说我们常常是将页面的容器设置为980px。其实我们可以使用CSS3的Media Queries来检查浏览器可视窗口的大小。当显屏的可视窗口小于980px时我们布局不在采用固定宽度而将采用流体宽度布局来替代如果显屏可视窗口的宽度小于650px时我们主内容宽度和边栏宽度都将变成全屏并一列显示出来 1. html 2. css
接下来我们主要来看一下布局上的主要样式细节大家回头看文件慢慢品味。在这里我们在页面的容器“div#pagetwrap”设置了一个固定宽度“980px”并且让他居中显示在“div#header”为页头设置了一个固定高度“160px”并且将主内容“div#content”给了一个“600px”的宽度左浮动边栏“div#sidebar”宽度设置为“280px”并且将其设置为一个右浮动。主要代码如下所示 这样的DEMO效果是:不管怎么样缩放浏览器宽度都是定死的980px因为到这里我们还没有使用到css3 Media query 3. 下面我们开始导入css3 media query
3.1 导入Media Queries的JavaScript脚本
Media Queries是CSS3的一个属性那么他在IE6-8下我不说大家都懂的为了解决能在IE6-8下运行就需要导入一个css3-mediaqueries.js的javaScript的脚本文件 3.2 导入Media Queries CSS样式文件
3.3 显屏可视化窗口小于980px流体布局
前面也说过当显屏可视化窗口小于980px时我们将使用流体布局来替代固定布局。那么将在流体布局中使用下面几个规则
- div#pagewrap”重设宽度为95%
- div#content”重设宽度为60%
- div#sidebar”重设宽度为30% 请注意此时仅仅是将固定布局中的固定宽度替换成了百分比宽度而原来固定宽度中的左右浮动仍然是存在的
3.4 显屏窗口小于650px使用一列布局
上面我们实现了两种效果接下来我们来看显屏可视化窗口小于650px时将页面的布局改成一列布局
- 页头将页面头部的固定高度设置为自动(取消了原来的定高)
- searchform重新改变定位位置
- 主菜单的position重为static
- logo和网站口号也将position改回static
- 主内容的宽度设置为auto并取消浮动
- sidebar的宽度设置为100%并取消浮动 3.5 显屏可视化窗口小于480px智能手机布局
- HTML:禁用文字大小调整。默认情况之下iPhone的文字大小是可以缩放的我们可以在html加上一个“-webkit-text-size-adjust: none;”来禁止其缩放
- 主菜单的字体大小重置为90 3.6 灵活的缩放图片
这里涉及到一个图片缩放的问题也就是说图片也要能跟随你的显屏大小成比例的缩放。那么实现这样的效果方法还是很简单的你只要在你的img标签中加入 由于max-width在IE的某些版本中无法识别为了兼容这些浏览器可以考虑这样使用 3.7 灵活的嵌入式视频
为了使嵌入式的视频灵活我们也可以根据上面的方法来使用但对于embed元素在safari下的不支持max-width属性那么我们可以改用下面的方法来替代 注意
可适应图片
为了让你的图片也能随着显屏大小改变其显示比例不至于破坏你的布局你需要给图片应用上可缩放的代码
