图html字体为20px时，6rem=120px字体为40px时，6rem=240px二传统适配方案的局限性流式布局百分比布局优点宽度自适应，实现简单缺点高度固定，大屏设备下元素被拉长，比例失调示例图片宽度100%时，高度不变会导致变形固定宽度布局 优点与设备宽度等比缩放缺点大屏设备；在HTML文件中引入一个名为commoncss的外部样式文件在commoncss文件中，分别书写针对电脑端和手机端的样式代码，确保电脑端的样式优先被加载使用媒体查询在commoncss文件中定义媒体查询，根据设备的宽度自动切换样式例如，设置当屏幕宽度小于某个阈值时，应用手机端的样式当屏幕宽度大于该阈值时；在手机上不能固定宽度，要按百分比写页面宽度才能自适应设备主要是这两点，当然细节上面还有很多和PC端不一样的地方指向文件错误，比如你的网页文件在A，但是你却指向了B你把指向的文件放到网页文件内在试试如果下载下来的图片大小规格完全一样的话，在photoshop中设置一个动作，就能批量处理了；设置viewport元标签在HTML页面的lthead部分添加ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=1， minimumscale=1， maximumscale=1， userscalable=noquot这有助于页面在不同设备上保持原始比例，禁止用户缩放页面使用百分比法CSS百分比；1首先，打开html编辑器，新建html文件，例如indexhtml，编写问题基础代码2在indexhtml中的ltinput标签中新增样式代码style=quotwidth 200pxheight60pxquot3浏览器运行indexhtml页面，此时input框的宽度被设置为200px，高度被设备为60px了。

1首先用sublime text2新建一个测试用的html页面2这个时候在网页中添加以个label标签和一个input框3预览一下效果，我们可以知道默认的宽度是104这里我们通过设置size的属性修改一下宽度5再预览一下效果，我们可以看到是宽度减少了6如果是简单改变宽度这就足够了，但是如果修改一下；HTML页面可以通过以下方式实现自适应电脑屏幕宽度使用CSS媒体查询媒体查询允许你根据不同的设备特性应用不同的CSS样式例如，你可以设置当屏幕宽度小于某个值时，调整页面布局字体大小等，以适应不同尺寸的电脑屏幕css@media * 当屏幕宽度小于1200px时应用的样式 *body fontsize 14pxcontainer w；页面内容 ltdiv这段代码创建了一个宽度为800像素高度为600像素的div容器，如果内容超出这个范围，会自动出现滚动条2 设置视口元标签 在移动设备上，可以通过设置ltmeta标签来控制视口的大小和缩放级别例如htmlltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10quot这段；添加禁止缩放功能到HTML5项目，可通过在页面头部设置meta标签来实现代码示例如下在上述代码中，`userscalable`属性设置为`no`，即禁止用户缩放页面`width=devicewidth`表示页面宽度等于设备宽度，`initialscale=10`表示页面初始缩放比例为1，`maximumscale=10`表示页面最大缩放比例也为1。

2你可以设置舞台或者设备的属性，舞台裁剪为no，如果用的是短款手机观看作品，有滚动条也可以看到完整的案例3如果你想要实现完美适配，可以做三个设备，宽度均为640，高度可设置为1040iPhone6 plus1008iPhone5s和大部分Android手机832iPhone4s1HTML5的设计目的是为了在移动设备；1，使用js根据屏幕分辨率来设置html宽度，不同的分辨率采用不同的html宽度2，采用固定宽度然后居中对齐或者左对齐或者右对齐3，由用户选择或者调整宽度，让后记住该用户习惯，以后登录时直接读取前回设置的宽度4，将以上三种方法结合使用知道方法，剩下的就是看你自己如何灵活组合了没有万能的；如果屏幕宽度小于400像素maxdevicewidth 400px，就加载tinyScreencss文件ltlink rel=quotstylesheetquot type=quottextcssquotmedia=quotscreen and minwidth 400pxand maxdevicewidth 600pxquothref=quotsmallScreencssquot 如果屏幕宽度在400像素到600像素之间，则加载smallScreencss文件；ltmeta name=quotviewportquot content=quotinitialscale=1， maximumscale=3， minimumscale=1， userscalable=noquot这个申明是移动设备用的，11显示设备屏幕大小，禁止缩放二在手机上不能固定宽度，要按百分比写页面宽度才能自适应设备主要是这两点，当然细节上面还有很多和PC端不一样的地方我就不；一 自然拉伸 如果你的网站结构没有用到大量的图形来衔接，主要由表格来定结构，那么你就可以使用该方法非常适用于主要由表格文字来表达信息的简单的网页页面制作表格时，只要你把表格的宽度属性定义为100 ，表格就会根据分辨率的不同自行调整宽度二 固定居中 在800×600分辨率下制作的网页在。

在进行网页打印时，需要将这个物理尺寸转换为像素尺寸这通常依赖于DPI每英寸点数这一指标经过测试，网页打印中默认采用的是96dpi，而非72dpi因此，A4纸在96dpi下的分辨率是宽度210mm × 96像素2541mm = 79364像素，约等于794像素高度297mm × 96像素2541mm = 112296；这是一个精确的值，并设置高度和背景色，以便查看下一步的效果3然后设置select2的宽度在这里，使用百分比设置宽度百分比代表整个屏幕的比例，设置为50%4最后，当进入浏览器时，可以看到两个具有不同宽度的选择下拉列表上面是控制HTML页面中下拉列表宽度的方法；蓝湖导出的HTML宽度并不是固定的1340或1440蓝湖平台作为一个设计协作工具，其主要功能之一是提供一键将设计图转换为HTML代码的服务这一过程中，蓝湖会根据设计图中的元素和布局自动生成对应的HTML结构和CSS样式因此，导出的HTML宽度并不是预设的固定值，如1340或1440，而是根据设计稿的具体内容动态生成。