当前位置:Gxlcms > html代码 > 高手回答下自适屏问题吧!_html/css_WEB-ITnose

高手回答下自适屏问题吧!_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:29人阅读

关于自适适应各种不同尺寸屏幕,不太懂,(百分百好像也可以,但要精算。。除了这种还有什么法子?)

俩台电脑,(台式,屏幕大约21寸,笔记本,14寸好像)
给出我个人一个小实例吧:
我仿一个网站,将人家背景图片拿来用!他的背景图片是1830*1650(是这个网站http://rappelz.eaglegamesea.com/)

我试过俩种方法

1:固定值,就是把宽高全部给出,但,会出现滚动横条的。
2:100% 这个不知道是不是我不会设置还是咋? 只出现图片的一半。

所以,哎,不太懂自适应!,求高手耶!





回复讨论(解决方案)

100%

还有一句,我现在是在用笔记本,但是帮我朋友仿这个网站,他好像是台式噢

还有一句,我现在是在用笔记本,但是帮我朋友仿这个网站,他好像是台式噢
用相对布局,他用17 19寸,也就拉伸了,如果你想充满屏幕的话
不过一般不用这样,满足大部分人就行了,CSDN,这格子不就是固定宽度的吗,
显示器分辨率大两边空白就多,这是很正常的

嗯,我也明白满足大部分就OK了,但是,有一个必要(就是不出现横滚动条)
引用 2 楼 的回复:

还有一句,我现在是在用笔记本,但是帮我朋友仿这个网站,他好像是台式噢

用相对布局,他用17 19寸,也就拉伸了,如果你想充满屏幕的话
不过一般不用这样,满足大部分人就行了,CSDN,这格子不就是固定宽度的吗,
显示器分辨率大两边空白就多,这是很正常的

帮我做下范例。。亲, 是以上面给出的宽高做成背景。
引用 2 楼 的回复:

还有一句,我现在是在用笔记本,但是帮我朋友仿这个网站,他好像是台式噢

用相对布局,他用17 19寸,也就拉伸了,如果你想充满屏幕的话
不过一般不用这样,满足大部分人就行了,CSDN,这格子不就是固定宽度的吗,
显示器分辨率大两边空白就多,这是很正常的

这还有Demo呐,你知道宽度就行了,


800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右
在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.
页面标准按800*600分辨率制作,实际尺寸为778*434px

800*600一般是老网吧大PP那种,就以1024*768为标准吧,宽最大为1002

拉伸(根据百分比来定制大小)
吸附(四个方向中任意几个固定)
顺延(更具内容的多少自然排列)
多样式表(根据设备屏幕的大小准备不同的补充样式表)

最后 不要认为不同设备屏幕要有同样的显示 主体内容不变就ok了

基本就这样了

能说明么!~!
拉伸(根据百分比来定制大小)
吸附(四个方向中任意几个固定)
顺延(更具内容的多少自然排列)
多样式表(根据设备屏幕的大小准备不同的补充样式表)

最后 不要认为不同设备屏幕要有同样的显示 主体内容不变就ok了

基本就这样了

这样去理解,背景图假如是:width:1024,height:900.你设置页面是100%,在1024*900分辨率的屏幕上会刚好,如果在1368*760上面背景图就会沿着横向,纵向重复(未设置其他css条件情况下)。一般不推荐用自适应的布局,不过导航和底部可以用自适应。就是因为自适应很难控制布局。

你可以设置布局方式为position: absolute;top:0px;left:0px;right:0px;bottom:0px;这样是全屏自适应的,然后在里面设置具体的布局方式就可以了,我做自适应的时候,都是这样做的。。。

人气教程排行