1、如何让网页自适应所有屏幕宽度
“自适应网页设计”到底是怎么做到的?其实并不难。
1.首先,在网页代码的头部,加入一行viewport元标签。
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0
,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
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)。
三、流动布局(fluid grid)
“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。
另外,绝对定位(position: absolute)的使用,也要非常小心。
四、选择加载CSS
“自适应网页设计”的核心,就是CSS3引入的Media Query模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
五、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)。
六、图片的自适应(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);
});
2、网页设计合适的页面尺寸是多少
网页设计选用的分辨率是72像素,使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计,一般采用全屏展示和两侧留白的方式。
全屏展示,是整个网站看起来大气一些,但是布局要合理安排,不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸,能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域,内容限时区域在好控制在1000px-1200px。
3、网页制作 怎么能让网页在不同的分辨率下全屏显示
用百分比。
<table width="100%" height="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" bgcolor="#0066FF"> </td>
<td width="60%" valign="top"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="#993300">
<tr>
<td> </td>
</tr>
</table>
<table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td> </td>
</tr>
</table></td>
<td width="20%" bgcolor="#0066FF"> </td>
</tr>
</table>
4、网页设计中使用全屏照片有哪些注意点
1、图片质量.
众所周知图片在网页设计中的重要作用,精美的图片配之以绝妙的文案能给网站获得漂亮的加分。而作为全屏背景的照片只有足够精彩漂亮才会给用户留下深刻印象,所以设计师在选择照片时要注意图片的质量问题。此外还要重视图片展示的内容与网站主题的相关性,于此网站的主题内容才会在第一时间传达给访问用户。
网页设计中使用全屏照片有哪些注意点.
2、注意排版.
网页设计中,使用全屏照片做为网站背景固然简洁漂亮,干净利落之余设计师需更要考虑到整个网页的布局,如何在大幅照片上进行排版,设置栏目,与照片背景颜色不产生冲突,又不影响用户的阅读体验。
3、切图.
设计师在使用全屏大图时,需要注意背景不能太大,否则切出的背景太大会导致网站打开速度变得缓慢。此外需要注意的是,由于用户习惯的差别,使用的浏览器也有所差别,设计师在切图时需要综合考虑各浏览器的兼容性问题,以及电脑的显示屏大小问题,保证用户在打开网站时,图片能自动适应各种浏览器以及不同尺寸的显示屏。
在网站建设中,使用全屏照片作为网站背景不仅简化了网站的复杂样式,还可利用大幅照片以提升网站的感染力。
本文是 成都网站建设公司、成都网站设计制作公司、成都APP开发公司、 成都响应式网站建设、成都VR全景制作-桔子科技公司为您整理!
5、网页设计中,如何让网页能在不同的分辨率下都全屏显示?
定义一个整体的DIV把宽度设置哦100%就可以了,如果里面有几列的话,首先确定哪几个地方固定大小,哪先地方能缩放!根据情况定吧!
6、网页设计问题:打开网页全屏代码,网页全屏隐藏任务栏代码是什么?
是window.open吗 百度下 有你需要的详细资料
7、设计网页时让链接全屏显示的代码是什么啊
一打开网页不需要点击,能够直接全屏隐藏地址栏的那种如何实现 如我把静态网页刻到光盘中,打开立刻全屏 <script language="javascript"> if (this.name!='FullWnd') { window.open(location.href,'FullWnd','fullscreen,scrollbars=no'); this.parent.opener=null; this.parent.close(); } </script>
8、制作网页如何能让页面全屏!
如果您想要让指定网页页面全屏显示的话,您可以在该页面的html源代码文件中,添加下面的代码就能实现了:
<form>
<div align="center">
<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, ''big'', ''fullscreen=yes'')">
</div>
</form>
如果这个方法不满意,你可以做一个flash。把网页嵌到里面。
9、全屏的网页,设计psd时需要采用什么尺寸的分辨率
在网页上图上是可以缩放的,可以设置全屏。小到0,大到无限。