返回列表 发新帖

编写自适应网页的方法

[复制链接]
灌水成绩
800
主题
820
帖子
5293
积分
等级头衔
积分成就
  • 威望: 0
  • 贡献: 4473
  • 金钱: 0
  • 违规:
  • 在线时间:277 小时
  • 注册时间:2019-3-9
  • 最后登录:2019-11-10
个人勋章

官方

联系方式
QQ
发表于 2019-10-19 17:15:19 | 显示全部楼层 | 阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
工具:dw网页设计软件;ps图像处理软件。
方法/步骤:
1,在<head></head>之间加入加入一行viewport标签。
  1. <meta name="viewport" content="width=device-width,initial-scale=1" />
复制代码

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
由于大家使用的电脑分辨率不一样,大小也不一样,所以网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素,对图像来说也是这样。
具体说,CSS代码不能指定像素宽度:
  1. width:xxx px;
复制代码

只能指定百分比宽度:
  1. width: xx%;
复制代码

或者
  1. width:auto;
复制代码

2,字体也不能使用绝对大小(px),而只能使用相对大小(em)。
例如:
  1. body {font: normal 100% Helvetica, Arial,sans-serif;}
复制代码

上面的代码指定,字体大小是页面默认大小的100%,即14像素。
3,"自适应网页"的实例:
  1. <p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><!DOCTYPE html></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><html></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><head></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><meta charset="UTF-8"></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0" /></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><title></title></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><style></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">body {</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">height: 800px;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">}</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">.header {</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">width: 100%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">height: 15%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">background-color: aquamarine;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">}</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">.leftside {</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">width: 20%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">height: 75%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">background-color: skyblue;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">float: left;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">}</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">.main {</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">float: right;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">width: 80%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">height: 75%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">background-color: steelblue;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">}</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">.footer {</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">clear: both;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">width: 100%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">height: 10%;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">background-color: darkgray;</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"="">}</p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""></style></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""></head></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><body ></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><div class="header"></div></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><div class="leftside"></div></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><div class="main"></div></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""><div class="footer"></div></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""></body></p><p style="margin-top: 4px; margin-bottom: 26px; border: 0px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; box-sizing: border-box; color: rgb(102, 102, 102); font-family: " pingfang="" sc",="" "microsoft="" yahei",="" "helvetica="" neue",="" helvetica,="" stheiti,="" sans-serif;="" font-size:="" 15px;"=""></html></p>
复制代码


帖子地址: 

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表