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、网页设计时如何协调宽屏窄屏的问题(下线等)
用<TABLE>或者<DIV>标签固定宽度,一般是778,全屏是1003,这里的宽度主要针对的是4:3的显示屏,毕竟16:9的现在还不是主流
3、网页设计设计多大尺寸在1024*768中不出现滚动条?宽屏中多少
1003-1004
4、网页设计合适的页面尺寸是多少
网页设计选用的分辨率是72像素,使用的画布尺寸1920px*1080px。但是并不意味着在整个画布上进行设计,一般采用全屏展示和两侧留白的方式。
全屏展示,是整个网站看起来大气一些,但是布局要合理安排,不然看起来有些傻大的感觉。
两侧留白是为了适配不同电脑屏幕的尺寸,能够确保网站只是电脑站的时候一些笔记本电脑也能显示全面网站的内容区域,内容限时区域在好控制在1000px-1200px。
5、用宽屏显示器制作的网页,怎样在窄屏显示网页居中
你做了一个1410宽的网页!你的意思是你的网页宽度有1410宽吗? 建议楼主普遍的网页宽度在1000左右! .main{margin:0 auto;widht:1000px;}
麻烦采纳,谢谢!
6、现在做一个酒店网站制作要多少钱一个?要宽屏大气的。
可能您对这方面的行情不太了解吧。一般的基础的就是500-800元这样的,不会超过1千块,但这是很简单的,一看是那个模版的,现在的客户审美不一样,估计很难吸引客户。所以想要让留印像深的,一般是订制的,就是您的设想,想达到什么,让设计师帮您构思完成你想要的,来做一个好的,有品质的上千点科技找,上档次的网站,人家也觉得你有实力。不过也要价格就说不准了,因为是按你的想法和要求来弄的,程序各方面都是配合你编写代码,功能等都是要操作的,所以要商量阶格了,一般也不太贵6000块钱到8000元间吧,算是这个价价了,
7、设计好的网页在不同显示器上显示不同,19正 19宽屏 22宽屏
做为网页屏幕大小的选择,这是一个选择问题,目前比较流行的做是以1024*768这样的一个屏幕分辨率来做的,比如淘宝1000px; 很多blog类的网站,就是以%比的方法,一般是100%.
个人建意,最好不要按照19宽屏 22宽屏这样的屏宽去做,因为现在这样的显示器目前一段时期还没有完全普及。如果一定要都能显示全屏的话,那你可以考虑用100%的宽度去做;
当然我还是建意你,门户类、公司类和行业类都以1000px ,这样网站也不会显的小器,而且适合于目前大部分的显示器;
8、用dreamweaver设计网页时,如何控制页面使得它在宽屏上显示也是正常的?
设置固定的页面宽度。
但没有什么方法能让dreamweaver制作的时候和所有分辨率显示下都一样,既是 所见非所得。。。。
A
9、宽屏电脑上设计的网页在普屏上显示不好怎么解决
1,使用专门的Dreamweaver之类的设计软件,按普屏的大小设计,将网页居中显示,这样,在宽屏时,两边为空,在普屏时全屏显示。
2,设计时,使用固定的像素值,不要使用百分比,这样在普屏时,会造成内容集中。
3,或者可以使用脚本判断,如果显示屏是宽屏,自动跳到宽屏的页面,否则跳到普屏设计的页面,不过这样需要设计多个用于显示的页面。