制作HTML5页面适应电脑和手机尺寸的方法主要包括以下几步利用meta标签设置viewport元标签在HTML页面的lthead部分添加ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=1， minimumscale=1， maximumscale=1， userscalable=noquot这有助于页面在不同设备上保持原始比例，禁止用户缩放页。

前端HTML5自适应页面布局方法多种多样，以下列举几种常见且实用的方法利用CSS3的媒体查询功能，可以根据不同屏幕大小或设备类型加载特定CSS样式，实现页面自适应布局媒体查询允许开发者针对特定条件定义样式规则，如屏幕宽度设备类型等，确保页面在不同设备上呈现良好效果通过设置viewport元标签，可以控制。

1，输入positionfixedtop0left0将整个div固定在屏幕的顶部和左侧2输入width100％height100％min－width1000px这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变3输入backgroundsize coverwebkitbackgroundsize c。

调整视口，设置为width=devicewidth，即视口设置为当前设备的宽度代码实例布局之路移动端开发实例 确定设计图的最小字体，浏览器部分能够显示的最小字体为12px当移动端页面宽度为320px时，最小字体为12px，那么在1080px的设计图中，最小字体应为42px代码实例html fontsize 42px。

HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果自适应屏幕的宽度，利用css中background属性可以实现 1新建一个HTML文件，代码如下图 2打开HTML文件所在的文件夹，双击文件，跳转到浏览器 3改变浏览器大小，发现图片没有变化，显示不全 4在所在文件夹下。

在创建样式文件时，可以使用以下CSS代码来实现图片的自适应功能backgroundimage url#39图片路径#39backgroundsize coverbackgroundposition center这些规则将确保图片根据容器的大小调整其显示比例，同时保持图片的中心对齐完成代码编写后，返回到HTML文件所在的文件夹，双击HTML文件以打开它。

首先你要在html页面头部加上下面的代码viewportquot，不懂可以百度content=quot，一些小的模块可以用固定尺寸meta ， name=quot再就是css中要应用到媒体查询，不能不用固定尺寸lt，其次你要把页面中的宽度修改为百分比width=devicewidth ，也就是@mediainitialscale=1quot超文本标记语言，标准。

自适应网站是一种利用HTML5技术，通过检测屏幕尺寸自动调整布局的设计方式，也被称为响应式设计它的核心特点是，无论在PC手机还是IPAD上，只需一套代码就能实现无缝适应，无需单独为每个平台开发，大大简化了维护工作这种设计对搜索引擎特别友好，特别是对百度为了明确告知百度页面的自适应特性，可以。

自适应网站是一种网页设计技术，它能根据设备屏幕的大小和宽度自动调整布局，适应在不同终端设备上的显示这种设计被称为响应式，是一种HTML5的新技术自适应网站具有以下优势1它使用一套代码来支持PC端手机端和IPAD端，无需额外的代码2只需要一个后台账号管理，简化了管理流程3避免了。

html5中是通过css3的backgroundsize来控制自适应的直接在图片代码里面设置style，例如ltimg src=quotxxxjpgquot style=quotmaxwidth100%quot2要么给图片统一一个class名例如responseimg，然后在css文件里面设置这个class html5 万维网的核心语言标准通用标记语言下的一个应用超文本标记语言HTML的。

自适应网站指的是，通过不同的终端设备自适应显示网页，并根据屏幕的大小和宽度自动调整网页布局，这是HTML5的新技术自适应网站具备以下优势1在PC端手机端和IPAD端采用同一套代码，避免了多端开发的繁琐2无需额外申请域名，一个后台账号即可管理所有终端，简化了网站管理流程3有效避免了。

一套代码满足多终端通过HTML5等技术的革新，自适应网站使用一套代码即可满足PC端手机端和IPAD端等不同设备的浏览需求简化管理流程无需为不同设备分别维护多个版本的网站，降低了管理成本二自适应网站对百度友好设计的体现 viewport标签标注通过在viewport标签下添加applicabledevice标注，明确页面。

用JavaScript或者jquery 1页面加载完，获取当前浏览器显示区域高度2获取页面中我的相册div1关闭相册的高度3用1获取的值减去2所有的值4用3所得值附加给div2 好了，方法教给你了，自己去实现吧这个。

逗自适应网页设计地的核心，就是CSS3引入的 Media Query模块它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件上面的代码意思是，如果屏幕宽度小于400像素maxdevicewidth 400px，就加载tinyScreencss文件如果屏幕宽度在400像素到600像素之间，则加载smallScreencss文件除了用html标签。

ltmeta name=quotviewportquot content=quotinitialscale=05， maximumscale=05， minimumscale=05， userscalable=noquotinitialscale 初始的缩放比例minimumscale 允许用户缩放到的最小比例maximumscale 允许用户缩放到的最大比例userscalable 用户是否可以手动缩放 html。

头部要加的是这个，放在ltheadlthead标签里，这是初始化手机屏幕的ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， maximumscale=10， userscalable=noquot 你写的这段是要放在所有css样式后边的，以防止样式覆盖这段的意思是在电脑屏或者其他屏上你显示的是一个。

一使用textarea标签进行多行文本的输入有很多限制，比如不能实现高度自适应，会出现难看的滚动条等问题HTML5中添加了一个新属性contenteditable，该属性可以让input，textarea以外的不可编辑的标签具备可编辑功能用法如下contenteditable=quottruequot当属性值为true的时候，可编辑标签内可以写入标签，对于。