如何让网页适应浏览器中的屏幕大小

首先，在网页代码的头部，添加一行viewport meta标签。

& ltmeta name = ” viewport ” content = ” width = device-width，initial-scale = 1 “/ >

Viewport是网页的默认宽度和高度。上面的代码意味着网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页的初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9。对于那些老浏览器(主要是IE6、7、8)，需要使用css3-mediaqueries.js

& lt!–[if lt IE 9]& gt；

& ltscript src = ” http://css3-media queries-js . Google code . com/SVN/trunk/css3-media queries . js ” & gt；& lt/script & gt；

& lt![endif]–& gt；

第二，不要用绝对宽度。

因为网页的布局会根据屏幕宽度进行调整，所以不能使用绝对宽度的布局或绝对宽度的元素。这个很重要。

具体来说，CSS代码不能指定像素宽度:

宽度:xxx px

只能指定百分比宽度:

宽度:xx %；

或者

宽度:自动；

三、字体的相对大小

字体不能用绝对大小(px)，只能用相对大小(em)。

正文{

字体:正常100% Helvetica，Arial，无衬线；

}

上面的代码指定字体大小为页面默认大小的100%，即16像素。

h1 {

字号:1.5em

}

那么，h1的大小是默认大小的1.5倍，即24个像素(24/16=1.5)。

小型{

字体大小:0.875em

}

小元素的大小是默认大小的0.875倍，即14个像素(14/16=0.875)。

四、流动布局(流体网格)

“流动布局”的意思是每个区块的位置是浮动的，而不是固定的。

.主要{

浮动:对；

宽度:70%；

}

.左栏{

浮动:左；

宽度:25%；

}

浮动的好处是，如果宽度太小，装不下两个元素，后面的元素会自动滚动到前面元素的底部，不会水平溢出，避免了水平滚动条的出现。

另外，绝对位置的使用要非常小心。

第五，选择加载CSS

“自适应网页设计”的核心是CSS3引入的媒体查询模块。

意思是自动检测屏幕宽度，然后加载相应的CSS文件。

& ltlink rel= “样式表” type=”text/css “

media= “屏幕和(最大设备宽度:400像素)”

href = ” tiny screen . CSS “/& gt；

上面的代码意味着如果屏幕宽度小于400像素(max-device-width: 400px)，将加载tinyScreen.css文件。

& ltlink rel= “样式表” type=”text/css “

media= “屏幕和(最小宽度:400像素)和(最大设备宽度:600像素)”

href = ” small screen . CSS “/& gt；

如果屏幕宽度介于400像素和600像素之间，则加载smallScreen.css文件。

除了加载带有html标签的CSS文件，还可以加载到现有的CSS文件中。

@import url(“tinyScreen.css “)屏幕和(max-device-width:400 px)；

六。CSS的@media规则

在同一个CSS文件中，还可以根据不同的屏幕分辨率选择应用不同的CSS规则。

@媒体屏幕和(最大设备宽度:400像素){

.列{

浮动:无；

宽度:自动；

}

#侧栏{

显示:无；

}

}

上面的代码意思是，如果屏幕宽度小于400像素，列块会取消浮动(float:none)，宽度会自动调整(width:auto)，侧边栏块不会显示(display:none)。

七、形象改编(流体形象)

除了布局和文本，自适应网页设计还必须实现图片的自动缩放。

只有这一行CSS代码:

　　img { max-width: 100%;}img {最大宽度:100%；}

这行代码对于网页中嵌入的大多数视频也是有效的，所以可以写成:

　　img, object { max-width: 100%;}img，object { max-width:100%；}

老版本的IE不支持max-width，只好写成:

　　img { width: 100%; }img {宽度:100%；}

此外，在windows平台上缩放图片时，可能会出现图像失真。此时，您可以尝试使用IE的专有命令:

　　img { -ms-interpolation-mode: bicubic; }img {-ms-插值-模式:双三次；}

　　或者，Ethan Marcotte的imgSizer.js。或者，伊桑·马科特的imgSizer.js。

addLoadEvent(function() {

　　var imgs = document.getElementById(“content”).getElementsByTagName(“img”);var imgs = document . getelementbyid(” content “)。getElementsByTagName(” img “)；

　　imgSizer.collate(imgs);img sizer . collate(imgs)；

});

但如果条件允许，最好根据屏幕大小的不同，加载不同分辨率的图片。有很多方法可以做到这一点，服务器端和客户端都可以实现。

网页设计合适的页面尺寸是多少？

分辨率1920×1080打开网页字体太小怎么调大？

1）打开开始菜单，并在搜索框中输入“DPI”，

2）然后选中并打开“放大或缩小文本和其他项目”，打开的“显示”窗口中，选中左侧的“设置自定义文本大小（DPI）”，

3）在打开的在自定义DPI设置界面中，就可以对DPI 进行设置，可以选择自己觉得合适的百分比，然后点击确定即可

网页设计如果我用1920*1080的页面，那么内容应该限制在多大尺寸？

最好控制在1000px吧，因为还有很多用户用的是分辨率很低的，如果你的用户都是用的大屏浏览器，那么就可以宽一点，比如你的客户是跟网站、设计类有关的，那么他们电脑的分辨率不会低的，至少是1440px，所以你可以先确定你用户的电脑大致分辨率的多大，再考虑宽度尺寸