自适应网页制作

如何把一个pc页面自适应手机屏幕

无论是电脑还是手机,要做到自适应屏幕,其实都是一样的。首先,在网页代码的头部,加入一行viewport标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。其次:网页宽度css一定要使用百分比width: xx%;,不能用绝对像素。当然可以用width:auto;第三,流动布局.left{float: left;width: ***%;}第四,选择加载css这是自适应的关键部分.abc{ height:300px; border:1px solid #000; margin:0 auto} @media screen and (min-width: 1201px) { .abc {width: 1200px}  } /* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */  @media screen and (max-width: 1200px) { .abc {width: 900px}  } /* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */  @media screen and (max-width: 901px) { .abc {width: 200px;}  } /* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */  @media screen and (max-width: 500px) { .abc {width: 100px;}  } /* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */ 需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media 判断CSS排错将导致判断失效。第四,图片自适应img { max-width: 100%;}老版本的IE不支持max-width,所以只好写成:img { width: 100%; }筚五、采用相对字体大小字体也不能使用绝对大小(px),而只能使用相对大小(em)。这里最重要的,是第三条和第四条,也就是采用流动布局和css选择加载。祝你好运!

dreamweaver cs6 中设置网页自动适应屏幕大小的代码?

这个适应的话,应该说的是能相对浏览器显示区居中对么???如果是的话,我给你举例一下,你这样写就行了:<div style="background:black;width:300px;height:200px;margin:auto;"></div>把这个代码弄到你的<body>区,应该就能自动适应了。如果你说的“自动适应”不是这个意思,那你再,当然,HI我或Q我也可以。 QQ? 我的资料里有写,这不让说Q号的样子。

html5如何使网页大小自动与显示屏

在头部<head></head>里加上<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">这句话,可以保证网页不能被缩放。例如:1234567<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><title>标题</title><head><body><body>

html页面 自适应pc端 屏幕大小 怎么设置

使用媒体查询,参考bootstrap里面的设置,或者直接使用bootstrap框架吧,根据浏览器的宽度自动设置宽度的媒体查询代码实例@media only screen and (max-width: 500px) {.gridmenu {width:100%;}.gridmain {width:100%;}.gridright {width:100%;}}

html页面怎么自适应

一、 自然拉伸如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为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中的层来定位。

关于网页制作大小与分辨率的关系

呵呵,我来回答你的问题吧。1:分辨率的问题。现在PC端大部分的网站都采用固定宽度、高度自适应、并居中的布局方法,宽度一般都是1000PX左右。这已经兼容绝大部分的分辨率了,至于极个别的分辨率的兼容性,要么舍弃掉,要么就对该分辨率重新设计一个版面。总的来说,PC端的分辨率,楼主不需要其有多大的疑虑,感觉有点太过忧虑。当你对网页制作更加深入以后,你会发现你的担心是多余的。2:你说自动铺满全屏。他没采用第一种布局方式,而是采用定位的方式布局的。3:网页在浏览器和DW软件显示有差异,你无需管网页在DW软件中的显示结果,显示结果均由浏览器显示结果为基准。因为用户使用浏览器访问你的网站。至于为什么会有差异,DW毕竟只是一个软件而不是浏览器。 那么定位的方式布局步骤是什么?我怎么设置。 用position这个属性来定位,绝大部分应该是用到的absolute;但也不一定全部,这个需要根据效果来布局的。网站不一样,方法肯定不一样。多多练习你就会知道了。~~

网页设计:怎么让frame的高度自适应??

可以用jQuery控制// 获取窗口的高度var win_h = $(window).height();$(".xx").height(win_h);// 窗口变化事改变高度$(window).resize(function(event) { // 获取窗口的高度 var win_h = $(window).height(); $(".xx").height(win_h);}

html手机页面的字体怎么设置随屏幕的大小变化页变化?

手机响应式布局,是获取屏幕尺寸,在某个区间用一种css,另个区间用另一种css。需要用@media写多份css的。无法做到真正的随屏幕变化而变化。而<meta name="viewport" content="width=device-width" />的用法是随着屏幕的大小,自动把页面自适应到屏幕的大小。这个是管用的。em是字体的宽度,也就是一个字体宽12px,那么em=12px;字体为15px,em=15px;一般用来动态控制字体外的区块大小去适应字体,而不是用来设置字体的大小的。例如:<p style="width: 12em;">     <!-- / 无论这里设置的字体多大,宽度只会容纳12个字 / --> </p>如果<meta name="viewport" content="width=device-width" />没效果,建议你用图片贴出来,看看你想要的具体效果是什么。

怎么在做网页的时候让背景图片根据屏幕的分辨率而拉伸从而适应屏幕大小

可以设置图片的宽度和高度都为100%,之后可自适应屏幕大小。举例:<div class="zj02" style ="width:100%;height:100%;overflow:hidden;"><img src="zj_01.gif" /></div>;此时图片即可全屏幕显示,不会出现”超宽“现象。

html页面怎样能够自适应电脑屏幕宽度?

网友们上网通常会采用800×600、1024×768两种分辨率,由于网页不是用来给自己看的,所以我们必须让自己的网页能够兼顾这两种情况,让不同分辨率设置的网友都能够看到一个排版美观正确的网页。一、 自然拉伸如果你的网站结构没有用到大量的图形来衔接,主要由表格来定结构,那么你就可以使用该方法。非常适用于主要由表格、文字来表达信息的简单的网页页面。制作表格时,只要你把表格的宽度属性定义为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() {var url_else = "http://www.163.com/";var url_800x600 = "http://www.sohu.com/";var url_1024x768 = "http://www.sina.com.cn/";var url_1366x768 = "http://www.qq.com";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>

建站需求填写

采购需求填写

采购需求

采购产品:
联系人:
* 联系电话:
公司名称:
补充说明:
* 验证码:
提交