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

自适应屏幕大小的网页是怎么做出来的,第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;
完成!

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)。
small {
font-size: 0875em;
}
small元素的大小是默认大小的0875倍,即14像素(14/16=0875)。

这个做起来很容易的,两个思路。
一个是,如果你只是想实现像百度这样的效果,假设网页外层DIV的class为container。那么可以这样来定义它的css
container {width:100%; max-width:1000px;}
这样的话,在浏览器宽度小于1000px的时候,就会认为它的宽度是100%的,也就是跟着浏览器的宽度变化而变化。
不过这个代码是不兼容IE6的,如果要做到兼容IE6的话,就可以考虑第二个思路了,也就是用js来解决这个问题。
具体的方法就不详细说了,你搜一下responsejs就可以了,这是一个专门用来实现你所说的自适应宽度的js文件,文件很小,但是功能非常强大。看看官方的说明文档应该很容易掌握的~~~


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

原文地址: http://www.outofmemory.cn/yw/13329637.html

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

发表评论

登录后才能评论

评论列表(0条)

保存