1选定基本设计尺寸，一般以1080为基准确定响应式web设计的应用场景之后，和美工或设计师沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准2当美工完成设计图之后，前端工程师的工作就开始了。

制作HTML5页面适应不同设备尺寸的关键在于合理运用meta标签CSS百分比法和CSS3 rem单位，以及媒体查询技术以下是具体步骤与原理1 利用meta标签设置viewport元标签，初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放这有助于页面在不同设备上保持原始比例2 百分比法C。

一HTML5技术概述 HTML5是超文本标记语言的最新版本，用于构建和设计网页内容它提供了更多的标签和元素，支持音频视频等多媒体元素，使得网页制作更加灵活和丰富二H5页面制作的主要内容 页面布局设计根据需求和设计稿，规划页面的整体结构和布局视觉元素制作包括文字图片图标背景等的设计。

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

一HTML5开发手机端页面的方法 基础准备学习HTML5和CSS3这是开发手机端页面的基础，HTML5提供了更多的语义化标签和API，而CSS3则提供了丰富的样式和动画效果了解JavaScriptJavaScript是实现交互功能的关键，特别是对于手机端页面，交互体验尤为重要响应式设计使用媒体查询根据设备的屏幕尺寸。

3随着现在宽屏时代的到来，1024也慢慢被淘汰了，现在都是大屏时代，基本上，从设计网页的角度来看，在PHOTOSHOP上，宽为960像素最为合适4随现在浏览的工具越来越多，包括手机IPAD等，出现了自适应的网页设计功能，需要HTML5及DIV+CSS的代码调用了B 网页设计合适的页面尺寸是多少 网页设计选用。

设置基准字体大小在CSS中设置html元素的fontsize为一个基准值，通常根据屏幕宽度动态计算使用rem单位页面中的其他元素尺寸使用rem单位，这样可以根据屏幕大小进行缩放，保持视觉一致性媒体查询检测页面和设备尺寸使用CSS3的媒体查询功能，根据页面尺寸设备屏幕尺寸等条件，为不同设备设置特定的CSS。

在HTML5手机端，要实现小键盘输入时页面布局不往上顶，可以采取以下措施使用rem布局确保页面元素自适应通过设置html元素的fontsize为动态计算的值，可以根据屏幕宽度调整页面元素的尺寸，从而确保页面在不同设备上的布局一致性使用JavaScript监听窗口大小变化事件，动态调整html元素的fontsize，实现页面元素。