查看: 5608|回复: 12
界面自适应问题，求助！
该用户从未签到
在Extaspnet中，采用PageManager 的 AutoSizePanelID设置界面自适应。此时，页面不会产生滚动条，当高度不够时，页面最下方的元素无法显示。
采用绝对宽高的界面布局方式，当分辨率不一致时，会在右边或者下方留下大片空白。
有没有什么方式，能够让界面在自适应宽度的同时，又会产生竖向的滚动条呢？求助！或者有min-width、min-heihgt等相关属性来控制呢？
该用户从未签到
是啊！老大，能不能加这样的功能啊！
该用户从未签到
易水临风 发表于
是啊！老大，能不能加这样的功能啊！
请问，你是采用怎么样的方法布局的呢？我布局始终不太好看。纯列表界面到是可以用AutoSizePanelID来控制！一般的录入界面就不太好控制了！
该用户从未签到
PageManager 的 AutoSizePanelID 足以，可以让界面控件的宽度自适应，高度不足时出现滚动条。
你说的情况可能是布局没用对，参考下官网示例的写法。
本帖子中包含更多资源
才可以下载或查看，没有帐号？
该用户从未签到
support 发表于
PageManager 的 AutoSizePanelID 足以，可以让界面控件的宽度自适应，高度不足时出现滚动条。
你说的情况 ...
好的，我再试试！！
该用户从未签到
support 发表于
PageManager 的 AutoSizePanelID 足以，可以让界面控件的宽度自适应，高度不足时出现滚动条。
你说的情况 ...
我看了Demo，里面用到了AutoSizePanelID的样例只有一个，基本上都是用的绝对宽度。然后会产生横向滚动，和竖向滚动。在设置了那个属性的话，Width和Height貌似就已经失效了。
该用户从未签到
☆幻~精灵 发表于
我看了Demo，里面用到了AutoSizePanelID的样例只有一个，基本上都是用的绝对宽度。然后会产生横向滚动， ...
对，那个属性的意思就是要子控件自适应宽度和高度。因此不需要设width和height
该用户从未签到
support 发表于
对，那个属性的意思就是要子控件自适应宽度和高度。因此不需要设width和height ...
再次请问下，我在PageManager上设置了AutoSizePanelID属性，然后怎样才能有竖向滚动条呢？没有竖向滚动条的话，界面靠下的很多界面元素无法显示！非常感谢！
该用户从未签到
☆幻~精灵 发表于
再次请问下，我在PageManager上设置了AutoSizePanelID属性，然后怎样才能有竖向滚动条呢？没有竖向滚动条 ...
自己下载源代码，重新编译后，查看上图所示的页面，你就能看到实际的效果。我前面也说了，AutoSizePanelID一个属性足以，会自动出现垂直滚动条的，如果高度不够的话
该用户从未签到
support 发表于
78807 自己下载源代码，重新编译后，查看上图所示的页面，你就能看到实际的效果。我前面也说了，AutoSizeP ...
哦，谢谢！
Powered by博客分类：
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /&
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
我写的那个页面因为是要在手机上显示，所以比例都设置为了0.5
&meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=yes" /&
浏览: 201250 次
来自: 北京
有相应的CSS和JS代码吗?
正好要用。哈哈哈哈。。
试了 好像不行哦frontopen主题V1.5.04.15版本已发布 推荐更新！
frontopen “讨论区” 正式上线
鸣谢主题捐赠者：感叹帝,Calon YE，孙玉龙，魂客，创想，孜夕寒
顾余笑，小菜，晨风，菠菜，*忠杰，浪子，99开发赞助，IT江湖，小熊
如果发现更新最新版出现缩略图无法显示，请先装回v1.4.03.02版本
使用@media screen解决移动web开发的多分辨率问题
使用@media screen解决移动web开发的多分辨率问题
围观109185次
编辑日期： 字体：
当今移动设备的发展已经越来越迅速，移动web开发的需求也越来越多多。许多大平台、大门户都纷纷推出了自己的移动web版网站。
随着移动设备飞速的发展，移动产品的屏幕规格越来越多。从几年前的320×240像素的屏幕，到现在80分辨率的屏幕。各种分辨率的屏幕让前端开发的人们叫苦连连，如何使用一种有效的方式来解决各种屏幕分辨率下的用户体验呢？
在css2中就有media type属性，用于判断媒体类型。而在css3中新增了 media query属性用于增强media type属性。因此当css3问世后，这个问题有了新的解决办法。media query属性的是media type属性的增强功能，使media type可以进行条件判断输出对应的css。
media query的使用方法
一、判断媒体类型，引用不同的样式表
&link rel=”stylesheet” media=”screen and (判断条件)” herf=”需要调用的样式表文件” /&
通过设定屏幕的判断条件，调用对应的css文件。该实例多用于整页面不同风格的css调用与选取，使用该方法可能需要为一个页面制作多份个css文件。
二、判断媒体类型，执行不同的css样式属性
@media screen and (max-width:240px){
.box{width:200}
.title{color:}
上述实例可以出现在外部样式表与内部样式表中。直接在样式表中以@media screen属性标注媒体类型的判断事件，在括号中写出判断条件为max-width:240px；该判断的意思是屏幕宽度大于240px则执行大括号内的样式属性，如果小于240px则不执行。
前端开拓者做了@media screen相应的判断尝试，并在首页与文章列表页加入了@media screen的功能实例。判断样式书写如下：
@media screen and (min-width:1200px){.post_box{width: 45%;float:}.c-con{height:140}}
如果用户使用分辨率宽度大于1200px的浏览器访问网站，则页面呈现为三栏模式，如下图：
如果分辨率小于1200px则页面会呈现为两栏模式，如下图：
建议在使用判断时，如果只是在样式表内进行判断的话，可以修改部分重要样式来达到修改布局的目的。
通过@media screen与width条件判断，可以事先对页面的宽度进行策划，然后根据不同的页面宽度设定不同的css样式，有效的控制web页面在各种分辨率下的样式表先。
本文固定链接:
转载请注明:
作者：品味人生
就是一个管理员，frontopen的管理员，嗯，介绍完毕！
如果您觉得这篇文章有用处，请支持作者！鼓励作者写出更好更多的文章！
您可能还会对这些文章感兴趣！&&&&&&&&&&&
在或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。　　第一种方法：做一个网页解决问题（长了点）　　如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。　　一、消除任意缩放浏览器窗口对网页的影响　　一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得"不堪入目"了，这是个很值得注意的问题。　　问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。　　大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。　　自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。　　二、让网页居中　　说到了窗口大小就会顺着路子想到分辨率的问题，在800&600分辨率下制作的网页在分辨率的机器上打开，整个网页就会跑到左边；分辨率的网页在800&600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？　　现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在时居中，只要在网页原代码的&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，一个是，在800&600的页面中加入一下代码就可以实现跳转了：　　　解决分辨率问题在Dreamweaver中没有此项功能，我们只能手动加入一段Javascript代码。首先在change－ie.html或change－nc.html页面代码中的& head&和& /head&中加入以下代码：　　 & script language=JavaScript& 　　 & !－－ 　　 function redirectPage(){ 　　 var url800x600=〃index－ie.html〃; //定义两个页面，此处假设index－ex.html和1024－ie.html同change－ie.html在同一个目录下 　　 var url=〃1024－ie.html〃; 　　 if ((screen.width==800) ＆＆ (screen.height==600))　//在此处添加screen.width、screen.height的值可以检测更多的分辨率 　　 window.location.href= url800x600; 　　 else if ((screen.width==1024) ＆＆ (screen.height==768)) 　　 window.location.href=url; 　　 else window.location.href=url800x600; 　　 } 　　 // －－& 　　 & /script&　　 然后再在& body&&内加入onLoad=〃redirectPage()〃　　 最后，同样地，在& body&和& /body&之间加入以下代码来显示网页的工作信息：　　 & script language=JavaScript& 　　 & !－－ 　　 var w=screen.width 　　 var h=screen.height 　　 document.write(〃系统已检测到您的分辨率为:〃); 　　 document.write(〃& font size=3 color=red&〃); 　　 document.write(w＋〃&〃＋h); 　　 document.write(〃& /font&〃); 　　 document.write(〃正在进入页面转换,请稍候&〃); 　　 // －－& 　　 & /script& 判断读者浏览器类型和屏幕分辨率，自动调用不同CSS我们在设计网页的时候一个比较头痛的问题是究竟我们的浏览者的分辨率是多少？如果使我们的浏览者能够更好的去浏览到我的网页，这个是我们设计前必须思考的问题。所以Leying在设计网页的时候第一个想的是兼容现在大多数浏览者的屏幕分辨率，这里头有几种最常用的方法：
1、硬行把网页先用表格框起来，框的分辨率应该是在760－780象素，其余的空间可以给一个背景图或者空白.
2、用自动缩放的方法也可以实现，这种方法比较古老，而且很简单，这个不多说了；
3、用自动判断的方法。
今天，就第三种方法来说说，如何来判断出浏览者的屏幕分辨率，根据不同的分辨率给予读者不同的浏览内容：
网络上也有一些能自动判断出你的浏览器是什么类型或者什么版本的代码，集成过来。
一、既判断分辨率，也判断浏览器，使之成为判断浏览器类型屏幕分辨率自动调用不同CSS的代码。&SCRIPT LANGUAGE="JavaScript"&&!--if (window.navigator.userAgent.indexOf("MSIE")&=1){var IE1024="";var IE800="";var IE1152="";var IEother="";ScreenWidth(IE1024,IE800,IE1152,IEother)}else{if (window.navigator.userAgent.indexOf("Firefox")&=1){//如果浏览器为Firefoxvar Firefox1024="";var Firefox800="";var Firefox1152="";var Firefoxother="";ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)}else{//如果浏览器为其他var Other1024="";var Other800="";var Other1152="";var Otherother="";ScreenWidth(Other1024,Other800,Other1152,Otherother)}}function ScreenWidth(CSS1,CSS2,CSS3,CSS4){if ((screen.width == 1024) && (screen.height == 768)){setActiveStyleSheet(CSS1);}else{if ((screen.width == 800) && (screen.height == 600)){setActiveStyleSheet(CSS2);}else{if ((screen.width == 1152) && (screen.height == 864)){setActiveStyleSheet(CSS3);}else{setActiveStyleSheet(CSS4);}}}}function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+ }//--&&/SCRIPT&为了大家明白，这里简单解析一下：引用内容var IE1024="";var IE800="";var IE1152="";var IEother="";引号里面分别填写，用户使用IE的时候并且分辨率为*600,要使用的css文件名。var Firefox1024="";var Firefox800="";var Firefox1152="";var Firefoxother="";引号里面分别填写，用户使用FireFox（一个也很流行的浏览器）的时候并且分辨率为*600,要使用的css文件名。var Other1024="";var Other800="";var Other1152="";var Otherother="";引号里面分别填写，用户使用其他浏览器的时候并且分辨率为*600,要使用的css文件名。
二、不判断分辨率，只判断浏览器实现根据浏览器类型自动调用不同CSS。&SCRIPT LANGUAGE="JavaScript"&&!--if (window.navigator.userAgent.indexOf("MSIE")&=1){//如果浏览器为IEsetActiveStyleSheet("default.css");}else{if (window.navigator.userAgent.indexOf("Firefox")&=1){//如果浏览器为FirefoxsetActiveStyleSheet("default2.css");}else{//如果浏览器为其他setActiveStyleSheet("newsky.css");}}function setActiveStyleSheet(title){
document.getElementsByTagName("link")[0].href="style/"+ }//--&&/SCRIPT&解释：（和前面的差不多）
如果浏览器为IE，则调用default.css
如果浏览器为Firefox，则调用default2.css
如果浏览器为其他，则调用newsky.css
使用方法：
很简单，放在 &&/head&& 前面即可。页面在不同屏幕分辨率下存在的问题及解决办法（未考虑800*600或更低分辨率的情况）一 问题在不同分辨率下，页面布局存在不同程度的差异，特别是页面上的表单控件，其宽度默认是固定值&width:150px&，当分辨率较高时，表格中的空白显得过多，页面布局显得很不协调，在宽屏显示器上尤为明显。二 解决办法方法1. 为不同分辨率单独做样式文件，在页面头部用js判断分辨率后动态加载定义好的样式文件。样式文件命名格式如：forms[_屏幕宽度].css，样式文件中只需重新定义文本框和下拉框的宽度即可。在包含的头文件headr.inc中加入js代码：if(screen.width & 1024){document.write('&link rel="stylesheet" type="text/css" href="${path}/nrmus/etc/css/forms_'+ screen.width +'.css"&');}forms_1280.css文件内容：/* 分辨率宽度为1280的时候，文本框和下拉框的宽度属性(width)单独定义* 参考计算方法为：（分辨率宽度-174）/4 * 0.7* 左侧菜单栏宽度为174px；右侧页面表格是4列；控件宽度为单元格的70%* (*0.7 = 193*/input.text{background:#FFFFFF;border:1px solid #B5B8C8;padding:3px 3height:22line-height:18vertical-align:padding-bottom:0padding-top:2width: 193color: #333;}select.select{width: 193}优点：实现很简单，代码量少；并且可针对不同分辨率做更细粒度的页面控制。缺点：无明显缺点。方法2 将整个页面的宽度设置为固定值，并使其居中显示。优点：可以很大程度的消除不同分辨率下的显示差异。缺点：分辨率宽度大于这个固定值的时候，页面两边会出现空白。方法3 用js判断分辨率，修改body的zoom属性（IE特性），即可实现对整个页面进行缩放，类似IE8或其它浏览器提供的缩放功能。优点：实现简单，页面能进行缩放。缺点：缩放是宽度和高度的等比缩放，高分辨率下字体、图片看起来会变小，问题解决的不彻底。 三 总结推荐方法1。页面布局的变化和分辨率的宽度有密切关系，和高度关系不大；常用的分辨率宽度也就几种，做几个简单的css文件即可。
阅读(...) 评论()问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
原来写过的一些页面，放到手机明明可以自适应的，为什么现在看不管用了呢？加的这段代码↓↓↓
&meta name="viewport" content="width=device-width"&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
相对单位：
百分比单位：vw vh vm %;
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：