以前在做小东西的时候，觉得只要适应了自己的手机就可以了，发现真的给自己挖了很多坑。今天终于好好地研究了一下，这是个痛苦的事情，但是却又真的很有趣。首先，先理解几个概念。1、屏幕尺寸 屏幕尺寸指屏幕的对角线的长度，单位是英寸 ： 1 英寸 =
2.54 mm 常见的尺寸有： 2.4 、2.8、3.5 、3.7，4.2、5.0等等2、屏幕分辨率 屏幕分辨率是指在横纵向上的像素点数，单位是px ，1px = 1个像素点3、屏幕像素密度屏幕像素密度是指每 英寸上的像素点数，单位是dpi （也叫dp），屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小，分辨率越高，像素密度越大，反之越小。4、dp、dip、dpi、sp、pxdip 和 dp 是一个意思，即屏幕密度。至于 dpi 是什么？可以这样理解，假如 1 英寸 里面有160个像素，那么这个屏幕的像素密度就是160dpi。在这种情况下，dp 和 px 换算非常简单，如下图所示：比如你在一个480x320的手机上布好了局，一看霸道炫酷，但你的单位是用px的，一到了800x480或者更高分辨率的手机的时候，就是东倒西歪的了。所以，我们一般不建议用px做单位。5、mdpi 、hdpi、xdpi、xxdpi上图中还有个ldpi 的，不过现在基本没人用这么惨不忍睹的分辨率了，所以就可以不用去管它了。用eclipse的我们经常会在 res 文件夹中看到这样定义的 drawable 文件夹，那么它们究竟是什么意思呢？Google 官方指定按照下列标准进行区分：在进行开发的时候，我们也需要对应不同的文件夹放入不同的图片：如果是对缩放不是特别重要的，我们可以把它放在drawable文件夹中，比如.9图等vc3Ryb25nPjwvcD4NCjxoMiBpZD0="6支持屏边屏幕尺寸">6、支持屏边屏幕尺寸回到我们的重点，我们今天要讲的就是屏幕的自适应。- 使用wrap_content、match_parent、weight为了确保布局的灵活性并适应各种不同的屏幕，我们一般建议使用 wrap_content 内容包裹，和match_parent 填充整个容器，这样就是不是绝对布局，而是可以根据屏幕的大小而自适应，但我们布局那么多，不可能每个都用这两个属性，所以，局限性也很大。至于 weight 权重这个属性呢，好用是好用，不过一般是在线性布局中，但线性布局有个尴尬的地方就是，如果你的布局很多，那么它的树根就会很长，这个对于 UI 的优化是很不利的，而谷歌一般建议我们的布局层数不要超过10层，所以，如果是相对比较复杂的，都是建议使用 Reativelayout 相对布局。所以，局限也很大。- 使用 dp 和百分比这个时候，你可能会说，使用 dp 和 sp 啊，dp 是密度，你分辨率不同，用 dp 也能很好的适应。 在网上找到两张图。使用相同的代码在两种不同的机型上运行的效果如下：很尴尬是不是，都使用了 dp 了，为什么还会出现这样的问题？其实很简单，因为屏幕的多样性，并不是所有的屏幕都是相同的 dp 长度，比如 Nexus One 属于hdpi ，屏幕宽度是320dp，而 Nexus 5属于xxhdpi ，屏幕宽度是360dp。所以，就算你用了dp也一样存在问题。比如，你在320 dp 里，写了一个TextView ，字体大小为24 sp，在两个不同的设备下，大小显而易见的不一样。基本看了它们的你就会了。我自己只是把我的理解也写一下而已。当然，在安卓 5.0 之后，安卓也支持百分比的了。这无疑是个好消息。大家可以看到，为什么我们在电脑浏览网页什么的，那些控件大小，总能根据我们屏幕大小的不同而变化，就是人家用了百分比的效果啊，百分比就是占据整个屏幕的比例，这个很容易懂吧。但是它的局限性就是在也在这里，需5.0系统，我自己试了一下，效果真心不错，但是放到4.3的系统，就乱套了。所以，可以适当了解。好了，言归正传，我们的方案很简单，就是在项目中添加你的分辨率的不同文件夹,如：自动生成 分辨率包的 Java 代码如下：import java.io.Fimport java.io.FileNotFoundEimport java.io.FileOutputSimport java.io.PrintW/** * Created by zhy on 15/5/3. */public class GenerateValueFiles {
private int baseW;
private int baseH;
private String dirStr = &./res&;
private final static String WTemplate = &{1}px\n&;
private final static String HTemplate = &{1}px\n&;
* {0}-HEIGHT
private final static String VALUE_TEMPLATE = &values-{0}x{1}&;
private static final String SUPPORT_DIMESION = &320,480;480,800;480,854;540,960;600,4;720,0;768,0;80,60;&;
private String supportStr = SUPPORT_DIMESION;
public GenerateValueFiles(int baseX, int baseY, String supportStr) {
this.baseW = baseX;
this.baseH = baseY;
if (!this.supportStr.contains(baseX + &,& + baseY)) {
this.supportStr += baseX + &,& + baseY + &;&;
this.supportStr += validateInput(supportStr);
System.out.println(supportStr);
File dir = new File(dirStr);
if (!dir.exists()) {
dir.mkdir();
System.out.println(dir.getAbsoluteFile());
* @param supportStr
w,h_...w,h;
private String validateInput(String supportStr) {
StringBuffer sb = new StringBuffer();
String[] vals = supportStr.split(&_&);
int w = -1;
int h = -1;
for (String val : vals) {
if (val == null || val.trim().length() == 0)
wh = val.split(&,&);
w = Integer.parseInt(wh[0]);
h = Integer.parseInt(wh[1]);
} catch (Exception e) {
System.out.println(&skip invalidate params : w,h = & + val);
sb.append(w + &,& + h + &;&);
return sb.toString();
public void generate() {
String[] vals = supportStr.split(&;&);
for (String val : vals) {
String[] wh = val.split(&,&);
generateXmlFile(Integer.parseInt(wh[0]), Integer.parseInt(wh[1]));
private void generateXmlFile(int w, int h) {
StringBuffer sbForWidth = new StringBuffer();
sbForWidth.append(&\n&);
sbForWidth.append(&&);
float cellw = w * 1.0f / baseW;
System.out.println(&width : & + w + &,& + baseW + &,& + cellw);
for (int i = 1; i & baseW; i++) {
sbForWidth.append(WTemplate.replace(&{0}&, i + &&).replace(&{1}&,
change(cellw * i) + &&));
sbForWidth.append(WTemplate.replace(&{0}&, baseW + &&).replace(&{1}&,
sbForWidth.append(&&);
StringBuffer sbForHeight = new StringBuffer();
sbForHeight.append(&\n&);
sbForHeight.append(&&);
float cellh = h *1.0f/ baseH;
System.out.println(&height : &+ h + &,& + baseH + &,& + cellh);
for (int i = 1; i & baseH; i++) {
sbForHeight.append(HTemplate.replace(&{0}&, i + &&).replace(&{1}&,
change(cellh * i) + &&));
sbForHeight.append(HTemplate.replace(&{0}&, baseH + &&).replace(&{1}&,
sbForHeight.append(&&);
File fileDir = new File(dirStr + File.separator
+ VALUE_TEMPLATE.replace(&{0}&, h + &&)//
.replace(&{1}&, w + &&));
fileDir.mkdir();
File layxFile = new File(fileDir.getAbsolutePath(), &lay_x.xml&);
File layyFile = new File(fileDir.getAbsolutePath(), &lay_y.xml&);
PrintWriter pw = new PrintWriter(new FileOutputStream(layxFile));
pw.print(sbForWidth.toString());
pw.close();
pw = new PrintWriter(new FileOutputStream(layyFile));
pw.print(sbForHeight.toString());
pw.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
public static float change(float a) {
int temp = (int) (a * 100);
return temp / 100f;
public static void main(String[] args) {
int baseW = 320;
int baseH = 400;
String addition = &&;
if (args.length &= 3) {
baseW = Integer.parseInt(args[0]);
baseH = Integer.parseInt(args[1]);
addition = args[2];
} else if (args.length &= 2) {
baseW = Integer.parseInt(args[0]);
baseH = Integer.parseInt(args[1]);
} else if (args.length &= 1) {
addition = args[0];
} catch (NumberFormatException e) {
System.err
.println(&right input params : java -jar xxx.jar width height w,h_w,h_..._w,h;&);
e.printStackTrace();
System.exit(-1);
new GenerateValueFiles(baseW, baseH, addition).generate();
}}要修改的就一个地方，即基准，比如上面的是以 480 x 320 为基准的。，我们可以改成我们所需要的。当然，你也可以生成 jar 包，然后在命令行下，生成不同的代码：先把过程打包成jar包，然后输入：Java -jar xx.jar width height width,height_width,height什么意思呢，前面两个是基准的意思。后面的是你要额外扩展的包。比如我要一个 的基准，再额外扩展 一个 的包。就可以这样写：java -jar test.jar 6,768后面也是要扩展的，这里可以根据不同而选择不同。、当然你也可以直接你要的基准的包：但这里也有局限性，看到网上很多屏幕说，如果带有虚拟键的手机，这个方案也不适合了，只能跟着虚拟键来重新适配，当然这里还是适用于很多记性的。这里把常用的两个基准 480x320 、800x480,和 基准的res包发给大家，当然我建议你自己弄。CSDN 的附件太蛋疼了，用360好了：160 基准 /cPFiutXhwhdpB 访问密码 1bc7240 基准 /cPFiFXihU7ytz 访问密码 29df320 基准 /cPFixBsSQqrrX 访问密码 91da7、安卓 TV 跟手机的不同这里我们要 讲讲安卓TV 跟手机的不同。在手机上，我们可以以一个480x320的基准来设计屏幕大小，因为手机撑死的就5.0寸，所以，这个基准还是非常不错的。但是安卓TV不一样，都是平板类的，而且是比较大的液晶屏。所以，我们的基准就是要变一下。要用 的为基准，当然，这个只是个人理解。有错误也欢迎指出。就爱阅读网友整理上传,为您提供最全的知识大全,期待您的分享，转载请注明出处。
欢迎转载：
推荐： 　　　网站制作页脚如何自适应布局_Web安全 - 网奇公司
网奇&|&&|&
网站制作页脚如何自适应布局
　　　　1、为了让 footer 能够刚好在最下方，时可以给footer加一个等于自身高度的上方的负边距强制把它向上推一个自身的高度，即 margin-top: -50 。但是这样的话当内容超过一屏我们会看到内容会盖在 footer 的上方，显然这是失败的。所以我们还要给 content-box 和 sidebar 加一个父级元素，设定它的下方内补丁等于 footer 的高度，强制把 content-box 和 sidebar 向上推一个 footer 的高度。同时，因为 content-box 和 sidebar 是浮动元素，所以我们还要让它 闭合浮动元素 。
　　2、加上页头页脚和内容部分，为了让 footer 在最下方，我们当然要把 footer“请出”wrapper 之外。当然，这样高度就超过一屏了，别急，后面有解决办法。
　　#header { background: G height: 40 } #sidebar { float: width: 200 background: G } #content-box { float: width: 570 background: O } #footer { height: 50 background: B width:770 margin: }
　　3、为了让浏览器识别高度100%在时需要先给html和body加上一个高度值，同时清除所有元素的margin和padding。顺便提一下，经过我的测试，html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。如何，是不是有点不好理解？
　　* { margin: 0; padding: 0; } html, body { height: 100%; }2、因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：
　　#wrapper { min-height: 100%; } * html #wrapper { height: 100%; } 这样，一个最简单的最小高度满一屏的自适应布局就做好了。
网奇网络原创文章，本文地址：，转载请注明出处。
的相关新闻
新手建站指导
免费网站模版
本文评论 　　 (0)
同意评论声明
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款
快速了解网奇
网奇产品导航
网奇 网站管理系统
网奇客户案例
Hot Search:|||||||||||||||||||||||||【求助】微信中打开网页如何做到自适应？
查看:551 | 回复:14
主题帖子积分
奥斯卡最佳男主角
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
&&&&&&&&&&&&&&&&&&&&
本帖最后由 King.Lin 于
17:59 编辑
微信中打开网页如何做到自适应？
要自适应苹果、安卓在微信中打开。
哪位MJJ能帮一下，一包烟钱
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&head&
& & &title&123123&/title&
& & &meta name=&keywords& content=&123123& /&
& & &meta name=&description& content=&123123& /&
& & &meta charset=&utf-8&&
&meta name=&viewport& content=&width=device- initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0& /&
&meta name=&applicable-device& content=&pc,mobile& /&
&/head&
&body&
&table width=&100%& border=&0& align=&center& cellpadding=&0& cellspacing=&0&&
&&&tr&
& & &td height=&320& colspan=&2& align=&center&&&p&&img src=&Images/1.jpg& width=&100%& /&&/p&
& & &p&&img src=&Images/2.jpg& alt=&& width=&640& height=&29& /&&/p&&/td&
&&&/tr&
&&&tr&
& & &td height=&50& colspan=&2& align=&center&&&img src=&Images/3.jpg& width=&100%& /&&/td&
&&&/tr&
&&&tr&
& & &td height=&90& align=&center&&&img src=&Images/4.jpg& width=&247& height=&123& /&&/td&
& & &td align=&center&&&img src=&Images/5.jpg& width=&254& height=&115& /&&/td&
&&&/tr&
&&&tr&
& & &td height=&50&&&colspan=&2& align=&center&&&img src=&Images/3.jpg& alt=&& width=&640& height=&2& /&&/td&
&&&/tr&
&&&tr&
& & &td height=&320& colspan=&2& align=&center&&&img src=&Images/6.jpg& width=&640& height=&300& /&&/td&
&&&/tr&
&&&tr&
& & &td height=&320& colspan=&2& align=&center&&&img src=&Images/7.jpg& width=&640& height=&300& /&&/td&
&&&/tr&
&&&tr&
& & &td height=&320& colspan=&2& align=&center&&&img src=&Images/8.jpg& width=&640& height=&300& /&&/td&
&&&/tr&
&&&tr&
& & &td height=&320& colspan=&2& align=&center&&&img src=&Images/9.jpg& width=&640& height=&300& /&&/td&
&&&/tr&
&/table&
&table width=&100%& border=&0& align=&center&&
&&&tr&
& & &td align=&center&&&img src=&Images/10.jpg& alt=&& width=&637& height=&347& /&&/td&
&&&/tr&
&/table&
&/body&
&/html&
复制代码
本帖子中包含更多资源
才可以下载或查看，没有帐号？
主题帖子积分
落伍者(一心一意), 积分 759, 距离下一级还需 241 积分
落伍者(一心一意), 积分 759, 距离下一级还需 241 积分
宽度要用百分比的
主题帖子积分
奥斯卡最佳男主角
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
宽度要用百分比的
谢谢，试了，还是没有用
主题帖子积分
落伍者(四季发财), 积分 12372, 距离下一级还需 37628 积分
落伍者(四季发财), 积分 12372, 距离下一级还需 37628 积分
HEAD里面加
&meta name=&viewport& content=&width=device- initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0& /&
所有宽度都用百分比
主题帖子积分
奥斯卡最佳男主角
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
HEAD里面加
所有宽度都用百分比
苹果图片变形，安卓端显示不完页面只显示一半。
主题帖子积分
奥斯卡最佳男主角
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
主题帖子积分
落伍者(三羊开泰), 积分 5584, 距离下一级还需 4416 积分
落伍者(三羊开泰), 积分 5584, 距离下一级还需 4416 积分
吸烟有害健康，楼主居心不良啊
今天真高兴
主题帖子积分
落伍者(四季发财), 积分 21349, 距离下一级还需 28651 积分
落伍者(四季发财), 积分 21349, 距离下一级还需 28651 积分
&meta name=&viewport& content=&width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&/&
&meta name=&applicable-device& content=&pc,mobile& /&复制代码
主题帖子积分
奥斯卡最佳男主角
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
落伍者(两全齐美), 积分 1777, 距离下一级还需 3223 积分
谢谢兄弟。
加上你提供的这一段代码后，苹果正常显示， 但是安卓还是显示有问题。
主题帖子积分
落伍者(五谷丰登), 积分 96627, 距离下一级还需 3373 积分
落伍者(五谷丰登), 积分 96627, 距离下一级还需 3373 积分
我操&&，楼主档次不低啊&&还九五啊
该帐号已经进行QQ绑定
论坛事务客服(8:30-17:00)：
&&&&商务广告客服(8:30-21:00,限广告合作)：
落伍者创建于,本站内容均为会员发表,并不代表落伍立场!
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论!
落伍官方微信：2030286 邮箱：(|)
浙ICP备号 BBS专项电子公告通信管[号
　 落伍法律顾问: ITlaw-庄毅雄位置 : 修改为适应多种设备浏览的页面，这尤其方便手机用户浏览pc网站。
您的举报已经提交成功，我们将尽快处理，谢谢！
方法一:先把所有的IE窗口关了;只打开一个IE窗口;最大化这个窗口;关了它;OK，以后的默认都是最大化的了
方法二:先关闭所有的IE浏览器窗口，用鼠标右键点...
这个，控制面板。显示器里面看看可不可改，或者你的显卡设置。有的是不能改的
把全部网页都关掉
然后只打开一个
这个就是你所说的“不大不小”
然后把它拖拉到全屏大小（不是最大化）
以后打开就是你刚才所拖的大小了
大家还关注