Heim > Web-Frontend > HTML-Tutorial > 新手,制作网页时设置网页大小为多少合适?_html/css_WEB-ITnose

新手,制作网页时设置网页大小为多少合适?_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:23:39
Original
4197 Leute haben es durchsucht

   想实现这样的网页大小。
   设计的网页,用户的客户端分辨率不同时,网页也跟着相应调整。
我自己做了一个网页,在我自己的计算机上分辨率显示排版是正常的,到别人计算机上,与我计算机分辨率不同,网页就显示不正常了,如背景图片会在平铺显示显示一次后,再显示一半


回复讨论(解决方案)

用100分比,通杀各种分辩率。

用相对布局就不会出现这种问题

   设计的网页,用户的客户端分辨率不同时,网页也跟着相应调整。
可以用js的识别分辨率然后调用不同的样式,但是这样做很麻烦,因为要写几套样式
建议还是像2、3楼说的那样用百分比或者相对布局来写
另外你说“背景图片会在平铺显示显示一次后,再显示一半”
这个只要把背景居中然后只显示一次就可以了
background:url() center no-repeat

现在很多网页倡响应式布局,楼主可以了解下

两种方式,960布局或响应式布局。
960布局默认页面是960像素,更宽的两边留空。响应式布局全部以百分比来做。
现在流行响应式布局

可以用响应试布局

背景图片可以设置不平铺,然后背景图片可以设计成和底色相配

背景图片可以设置不平铺,然后背景图片可以设计成和底色相配

初学者,学习了

问一下:
就像csdn论坛的网页随着用户的分辨率变化。
如: 1024*768 与1280*1024 相比,图片文字变大了,但布局不会乱,图片变大或变小这是为何?我就想实现这样的

问一下:
就像csdn论坛的网页随着用户的分辨率变化。
如: 1024*768 与1280*1024 相比,图片文字变大了,但布局不会乱,图片变大或变小这是为何?我就想实现这样的
请问图片变大,变小,你如何控制?
请你明白,像素与分辨率的关系.

我不知道!抱歉!网页开发是新手!
你可以改变自己计算机屏幕分辨率,看一下csdn网站,就知道了!我不知道咋描述

相对自适应其实很考功夫,建议不是熟手不要以此作为最终版本
我给的建议是多做几个不同宽度的版本,通过js判断客户端选择相对较窄的一个(可适当降低一个数量级)
记入cookie,以后的页面可以读取这个cookie作为页面布局依据
另外也要在页面上保留一些可供客户选择宽度的按钮,以免js的判断失误,客户可以手动调节,当然要覆盖cookie

然后把相对自适应作为课外作业,研究出可行的最终单一版本

反正我是不认为一个版本就能同时适应手机、笔记本、1080p,4k屏的……还没说有些屏可以竖起来呢

固定宽度,居中。网页再加背景色。

新手还是直接使用960布局比较安全,不过可以学习一下响应式布局,只是这种布局超级花时间和精力,你必须考虑从320到1920这一系列的宽度的表现,必要时还要隐藏部分内容,的确对新手要求太高。

可查960网格系统

看分辨率,一般的是1024*768

相对自适应其实很考功夫,建议不是熟手不要以此作为最终版本

同意!!!
另外,你看看各大网站的CSS就知道了,狗屁相对自适应。难的一B。

width:100%

问一下:
就像csdn论坛的网页随着用户的分辨率变化。
如: 1024*768 与1280*1024 相比,图片文字变大了,但布局不会乱,图片变大或变小这是为何?我就想实现这样的
CSS样式用百分比,这样可以根据浏览器或者屏幕大小来自动变化。

楼主看下,bootstrap 源码,照着他写。

background:url() center no-re解决你图片平铺的问题。
还有width:1100px; 相对定好你网页的宽和高。整体大容器里加上width:100%; 不管分辨率怎么变,网页布局都不会变。

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage