自适应屏幕大小的网页是怎么做出来的

自适应屏幕大小的网页是怎么做出来的,第1张

自适应屏幕大小网页是怎么做出来的

需要通过JS和专门的css模板来控制,还需要一些脚本来控制,这个一两句话说不明白,通过Dreamweaver可以自动生成,Dreamweaver有专门的模板(流体网格布局),这种技术称为响应式布局,可以通过网上搜一下相关技术资料,不过这种响应性网页布局虽然可以解决部分终端上显示的自适应的问题,但兼容性不能做到百分之百!通常的做法还是根据不同类型终端分别做成好几套,通过判断终端类型来加载不同的网页!

自适应屏幕大小的网页元素会乱,所以一般情况下都不是自适应的。

如果想帮成自适应,用百分比定义宽度width="100%"

有按照不同分辨率可以控制的css代码

文档宽度小于 300 像素则修改背景演示:

@media screen and (max-width: 300px) {

body {

background-color:lightblue;

}

}

一般是设置内容宽度为百分之多少那样with=“100%”复杂点就是利用js判断屏幕大小调用css,

安卓壁纸怎么设置能自适应屏幕大小

TextView 的属性 android:layout_height 和 android:layout_width 你设置的是wrap_content吧?

改成固定值如:

android:layout_height="60dip"

android:layout_width="60dip"

如何用JS控制网页字体大小,使其能够自适应屏幕大小

1首先,在网页代码的头部,加入一行viewport元标签。

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

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

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: 15em;

}

然后,h1的大小是默认大小的15倍,即24像素(24/16=15)。

all {

font-size: 0875em;

}

all元素的大小是默认大小的0875倍,即14像素(14/16=0875)。

怎么用frontpage是做的网页自适应屏幕大小,做好的网页在小屏幕显示或者不是全屏的显示就是乱的

div+css来

AIR做的ANDROID游戏怎么做到屏幕大小自适应

1首先获得手机屏幕的宽高,也就是你要显示的范围的大小

竖屏

private var screenWidth:int = stagefullScreenWidth;

private var screenHeight:int = stagefullScreenHeight;

横屏

private var screenWidth:int = stagefullScreenHeight;

private var screenHeight:int = stagefullScreenWidth;

注意的是横屏和竖屏宽高赋值要调转

2获得1个长方形的显示空间的对象

private var viewPort:Rectangle = new Rectangle(0, 0, screenWidth, screenHeight)

把要显示的starling初始化时候把长方形对象插入到第三个参数

myStarling = new Starling(MainGame,stage,viewPort);

设置starling中要显示画面的大小

myStarlingstagestageWidth = 480;

myStarlingstagestageHeight = 320;

完成!

在1024768或者800600的分辨率下可以自动调整成适用于该客户端分辨率的大小。

第一种方法:做一个网页解决问题(长了点)

如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。

一、消除任意缩放浏览器窗口对网页的影响

一番辛苦做出来的网页,在全屏状态下浏览一切正常。但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。

问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。

大家应该注意到,在DW中表格属性面板的高宽设定选择上提供了两种不同类型:百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。

自然,解决这个问题的办法就是将表格宽度设置成固定宽度(也就是像素值)。另外如果外层表格已做好固定宽度设置,内层表格也可以适当使用百分比设置。清楚这个原则以后,如果出现类似的问题大家也知道怎么解决。

二、让网页居中

说到了窗口大小就会顺着路子想到分辨率的问题,在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧?做起来费时,看起来也费劲。怎么办呢?

现在大多数网民都还在用800600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024768时居中,只要在网页原代码的<body>后紧加一句<center>,</body>前加一句</center>就OK了。不过有几个问题这是要注意一下,第一个就是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。例如width=770。如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。在<body>中加入leftmargin=0,即<body leftmargin=0>这种情况下,800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。

<html>

<head></head>

<body topmargin=0 leftmargin=0>

<center>

<table cellspacing cellpadding width=760><tr><td></td></tr></table>

</center>

</body>

</html>

 三、定义固定大小的文字

大家都知道,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时你的网页也可能变得"不堪入目"。虽然不是你的错,但客户是上帝。

如果使用了网页中的CSS样式表技术,就不会出现上述情况了。使用快捷键"Shift+F11"打开样式表"CSS style"编辑器,在窗口中单击鼠标右键执行"New CSS style"命令新建一个样式表,然后在给出的列表中选择"类型"选项,定义文字属性参数(一般文字的大小选择12px较为适宜)。完成后选择网页编辑窗中的文本,单击新的样式表名称,可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。

四、让网页适应不同的浏览器

浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。

虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果:

不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。

内联式的 CSS 在 Netscape Navigator 中经常会出现问题,使用链式或内嵌式。

有时需要在空层插入表格或者透明,以保证在 Netscape Navigator 里的效果。

对于只有几个像素宽度或高度的层,改用来实现。

避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。

第二种方法:做两个适合不同分辨率的页面,一个是800×600,一个是1024×768,在800×600的页面中加入一下代码就可以实现跳转了:

 

解决分辨率问题在Dreamweaver中没有此项功能,我们只能手动加入一段Javascript代码。首先在change-iehtml或change-nchtml页面代码中的< head>和< /head>中加入以下代码:

< script language=JavaScript>

< !--

function redirectPage(){

var url800x600=〃index-iehtml〃; //定义两个页面,此处假设index-exhtml和1024-iehtml同change-iehtml在同一个目录下

var url1024x768=〃1024-iehtml〃;

if ((screenwidth==800) && (screenheight==600)) //在此处添加screenwidth、screenheight的值可以检测更多的分辨率

windowlocationhref= url800x600;

else if ((screenwidth==1024) && (screenheight==768))

windowlocationhref=url1024x768;

else windowlocationhref=url800x600;

}

// -->

< /script>

然后再在< body…>内加入onLoad=〃redirectPage()〃

最后,同样地,在< body>和< /body>之间加入以下代码来显示网页的工作信息:

< script language=JavaScript>

< !--

var w=screenwidth

var h=screenheight

documentwrite(〃系统已检测到您的分辨率为:〃);

documentwrite(〃< font size=3 color=red>〃);

documentwrite(w+〃×〃+h);

documentwrite(〃< /font>〃);

documentwrite(〃正在进入页面转换,请稍候…〃);

// -->

< /script>

判断读者浏览器类型和屏幕分辨率,自动调用不同CSS

我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少?如果使我们的浏览者能够更好的去浏览到我的网页,这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率,这里头有几种最常用的方法:

1、硬行把网页先用表格框起来,框的分辨率应该是在760-780象素,其余的空间可以给一个背景图或者空白

2、用自动缩放的方法也可以实现,这种方法比较古老,而且很简单,这个不多说了;

3、用自动判断的方法。

今天,就第三种方法来说说,如何来判断出浏览者的屏幕分辨率,根据不同的分辨率给予读者不同的浏览内容:

MoveWindow 

库:user32 

该函数改变指定窗口的位置和尺寸。对于顶层窗口,位置和尺寸是相对于屏幕的左上角的:对于子窗口,位置和尺寸是相对于父窗口客户区的左上角坐标的。 

返回值 

如果函数成功,返回值为非零;如果函数失败,返回值为零。 

格式 

MoveWindow  hWnd, x, y, dwWidth, dwHeight, dwRePaint 

参数表 

参数 说明 

hwnd 欲移动窗口的句柄 

x 窗口新的左侧位置 

y 窗口新的顶部位置 

dwWidth 窗口的新宽度 

dwHeight 窗口的新高度 

dwRePaint 确定窗口是否被刷新 

TRUE 刷新 

FALSE 不刷新 

备注:如果bRepaint为TRUE,系统在窗口移动后立即给窗口过程发送WM_PAINT消息(即由MoveWindow函数调用UPdateWindow函数)。如果bRepaint 为FALSE,系统将WM_PAINT消息放在该窗口的消息队列中。消息循环只有在派遣完消息队列中的其他消息时才派遣WM_PAINT消息。

    MoveWindow给窗口发送WM_WfNOWPOSCHANGING,WM_WINDOWPOSCHANGED,WM_MOVE,WM_SIZE和WM_NCCALCSIZE消息

API如下 自己搞定即可

想要网页宽度自适应,需要把网页元素宽度设置为百分比,还要在网页头部加上代码:<metaname="viewport"content="width=device-width,initial-scale=10"/>。

自适应,且不超过原始大小,需要设置最大宽度,代码如下:img{ width:100%; max-width:100%;}。

改进功能

浏览器首次使用时,根据用户显示分辨率大小决定是否默认显示收藏栏;

打开多个标签关闭浏览器时,提示用户确认;

搜索栏关键词提示;

搜索栏支持多个搜索引擎;5内核窗口resize速度

以上就是关于自适应屏幕大小的网页是怎么做出来的全部的内容,包括:自适应屏幕大小的网页是怎么做出来的、如何让网页自适应所有屏幕宽度、易语言改变外部IE浏览器窗口大小,如何一键调整外部IE浏览器的高跟宽,求高手解答,最好写个代码,感谢!等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10157925.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存