制作网页模板适应不同分辨率（axure制作网页 怎么让他自适应不同电脑的分辨率呢）

本文目录

• axure制作网页 怎么让他自适应不同电脑的分辨率呢
• 如何让网页自动适应显示器不同的“分辨率”
• HTML页面是如何适应不同分辨率的显示器
• 如何让用表格排版的网页在不同的分辨率下可以自己适应
• 如何让网页自适应分辨率
• pc端页面适应不同分辨率
• 如何写自适应分辨率的网页
• 如何让网页自适应各种分辨率
• 怎么让网页适应不同分辨率的电脑
• 网站设计中如何设置网页尺寸使在不同分辨率下都能正常显示

axure制作网页 怎么让他自适应不同电脑的分辨率呢

1、双击打开Axure RP 8设计软件，在基本元件中拖曳一个矩形1到画布上。

2、再次在基本元件里拖曳两个按钮到画布上，放在矩形框上方。

3、再拖曳一个占位符到矩形框下方。

4、在右侧属性里自适应勾选“启用”，弹出“影响所有视图”。

5、点击左侧自适应按钮，弹出自适应视图，分别设置手机、平板和电脑分辨率的范围。

6、这时界面上显示出不同分辨率界面，然后预览该界面。

如何让网页自动适应显示器不同的“分辨率”

1、打开一个网页，在网页的右上方找到一个“查看”选项。

2、点击“查看”选项，下面出现一个下拉菜单，找到“网页缩放”选项。

3、把鼠标移动到“网页缩放”选项上，自动弹出一个列表菜单，里面就是缩放的比例，只要选择默认也就是100%就OK了，网页就能满屏适应电脑界面了。

HTML页面是如何适应不同分辨率的显示器

HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：

1、响应式布局设计：

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

2、自适应网页设计：

自适应网页设计（Adaptive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

扩展资料：

响应式布局与自适应布局的区别：

1、自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

如何让用表格排版的网页在不同的分辨率下可以自己适应

所有的高度和宽度都用相对值来输出width=100%height=100%如果分辨率为1024，那么网站的宽度就为1024像素如果分辨率为1280，那么网站的宽度就为1280像素这个需要精心设计，但通常很难两全其美，只能在页面上找些共同点尽量让网页适合屏幕

如何让网页自适应分辨率

在1024*768或者800*600的分辨率下可以自动调整成适用于该客户端分辨率的大小。　　第一种方法：做一个网页解决问题（长了点）　　如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。　　一、消除任意缩放浏览器窗口对网页的影响　　一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得"不堪入目"了，这是个很值得注意的问题。　　问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。　　大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。　　自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。　　二、让网页居中　　说到了窗口大小就会顺着路子想到分辨率的问题，在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？　　现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在1024*768时居中，只要在网页原代码的《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－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 url1024x768=〃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=url1024x768; 　　 else window.location.href=url800x600; 　　 } 　　 // －－》 　　 《 /script》　　 然后再在《 body…》内加入onLoad=〃redirectPage()〃

pc端页面适应不同分辨率

一、根据不同的分辨率，加载不同的css样式文件 800、1280、1440、1600、1920 在《head》《/head》标签中，使用js 《script》         if(document.screen.width》=1680){             document.write(’《link rel="stylesheet" href="css/css1680.css"》’)         }else if(document.screen.width》=1600){             document.write(’《link rel="stylesheet" href="css/css1600.css"》’)         }else{             document.write(’《link rel="stylesheet" href="css/css800.css"》’)         }     《/script》 二、媒体查询 css3新特性 1、多个样式表 《link rel="stylesheet" media="screen and (max-device-width:1280px)" href="css/css1280.css"》 《link rel="stylesheet" media="screen and (min-device-width:1280px) and (max-device-width:1680px)" href="css/css1680.css"》 《link rel="stylesheet" media="screen and (min-device-width:1680px)" href="css/css1920.css"》 2、一个样式表 @media screen and (min-width:1920px){大于1920px的样式} @medie screen and (min-width:1680px) and (max-width:1920px){1680-1920的样式} @media screen and (max-width:1680px){小于1680px的样式}

如何写自适应分辨率的网页

自适应的网页有两种写法： 方式一：用媒体查询"@media"，这种写法好处是可以对不同分辨率的设备，展示完全不同的UI界面，一个页面不同的设备看的时候，展示内容可以不一样，交互方式可以不一样。不过这个不方便用在复杂的地方，而且不同的分辨率都需要对应的重新写样式，同一个页面集合太多的这种写法，最好是分开写两套，降低耦合性。但是这种写法费力不讨好，之前有的网站在PC和手机查看到的样式不一致，用了一些这个技术，但是后来很多都是检测到不同设备，就跳转到不同的网页上去了。 方式二：等比例缩放，界面的比例不会改变，不论设备的尺寸是什么都完全自适应。缺点是等比缩放，PC页面在手机端展示就会很小！这种写法在写H5的时候比较实用，H5只是针对移动设备，移动设备不论分辨率怎么变，界面尺寸等比缩放的话，其实样式兼容性就解决了。这种写法也可以用在PC端，有时候设计按照1080P设计，用户使用的时候放在小屏幕上看就出现很多样式改变或者被压缩换行，界面适配比较不好做的时候，也可以使用等比缩放。 方式一用的不是很多，有兴趣的可以自己去看看，我们着重看方式二。 等比缩放最初我是用css的rem来做的，那会儿单纯的写h5,用px的话，手机显示屏分辨率不一样，用px做单位很难适配，用百分比的话，开发的时候真的要疯了，得按照设计图一个单位一个单位去算。后来想到了用css的rem做单位，只要保证根节点(HTML根元素)的字号不变，之后所有的页面按照rem为单位来写，那么在分辨率改变的时候，动态的调整根节点的字号大小，就可以做到适配。还需要注意的是，需要设置相对尺寸。这个尺寸最好是按照设计图来，这样做出来的东西和设计图才可以1:1还原。 如下：蓝湖可以设置相对单位比例，设置好就可以直接获取相对单位（假如设计图是1920px*1080px）。 在页面里引入如下js，页面即可等比缩放： (function (doc, win) { var root = doc.documentElement,     resizeEvt =’orientationchange’ in window ?’orientationchange’ :’resize’,     recalc =function () { var clientWidth = root .clientWidth       root .style.fontSize =14 * (clientWidth / 1920) +’px’        // 若页面要求在一定分辨率内不缩放，可以在此处加逻辑处理。 } // 如果浏览器不支持addEventListener，则中止   if (!doc.addEventListener)return   win.addEventListener(resizeEvt, recalc, false) doc.addEventListener(’DOMContentLoaded’, recalc, false) })(document, window) 小程序和uni-app都是用类似的思路来做的分辨率兼容。小程序的rpx或者uni-app的upx，在编译的时候会对应的转换为相对单位。而且小程序或uni-app按照750rpx作为屏幕宽度，其实相当于root .style.fontSize =1 / (clientWidth / 750) +’px’，始终把屏幕设置为750，再来自适应所有。PC在写的时候，也可以这样写root .style.fontSize =1 / (clientWidth / 1920) +’px’，这样可以看着好看点，不至于rem的数值是很多的小数。

如何让网页自适应各种分辨率

网友们上网通常会采用800×600、1024×768两种分辨率， 网页不是用来给自己看的，所以必须让自己做的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非网站是艺术类的，有特别需求，通常都会首先照顾分辨率设置为800×600的大众化标准。一、 自然拉伸如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。二、 固定居中在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费劲。所以目前普遍采用的方法是固定居中法！现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主。只要在网页原代码的《body》后紧加一句《center》，《/body》前加一句《/center》就OK了。不过有几个问题这是要注意一下，第一个要注意的是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在《body》中加入leftmargin=0，即《body leftmargin=0》这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。三、 兵分两路如果你的网页不经常更新，而且对页面效果极其在意，那好，你就设计两个页面，分别对应800×600和1024×768两种分辨率。然后根据不同的分辨率进行跳转就行了。例如： 《script LANGUAGE="JavaScript"》function redirectPage() {***隐藏网址******隐藏网址******隐藏网址******隐藏网址***if ((screen.width == 800) && (screen.height == 600))window.location.href= url_800x600;else if ((screen.width == 1024) && (screen.height == 768))window.location.href= url_1024x768;else if ((screen.width == 1366) && (screen.height == 768))window.location.href= url_1366x768;elsewindow.location.href= url_else;}《/script》

怎么让网页适应不同分辨率的电脑

以oppo R9 plus手机为例：

1、手机打开浏览器后，点按中间的。  

2、单击中间位置的后，单击内部的[设置。  

3、点击。  

4、这样，如果没有问题，启动以使网页自动适应不同的显示“分辨率”。

网站设计中如何设置网页尺寸使在不同分辨率下都能正常显示

目前没有见过十分有效的办法，常见的是采用最小的分辨率的情况先全屏显示，大分辨的话居中显示。也有些采用“魔术”显示，或者是用js识别，js更改属性显示但是这种方法非常的麻烦。