web前端开发屏幕适配 HTML页面是如何适应不同分辨率的显示器

web前端开发屏幕适配 HTML页面是如何适应不同分辨率的显示器相关内容，小编在这里做了整理，希望能对大家有所帮助，关于web前端开发屏幕适配 HTML页面是如何适应不同分辨率的显示器信息，一起来了解一下吧！

产品经理学技术：移动Web怎么做屏幕适配（一）_html/css_WEB-ITnose

【文章摘要】有段时间没有更新了，最近打算发一些硬一点的东西， 产品经理 学技术系列。

产品经理要不要懂技术的问题已经无需再讨论了，希望产品经理们可以从这些文章里，学到一点儿技术原理。
相关概念：
viewport：屏幕可见区域，你可以理解成显示屏幕大小。
1移动端适配一般指网页适配多种尺寸屏幕，让网页效果看起来和设计师的设计稿一样。说白了就是同一套代码在不同分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致，达到最优的视觉效果。
图1. 260*400的屏幕
图2. 380*400的屏幕
上面页面在不同大小屏幕上的展现，乍一看没什么问题，一般的工程师会认为已经OK了，所以前端工程师很容易忽略屏幕适配。但如果你是抠细节体验的产品经理，你可能会发现如下问题：
图1的屏幕的尺寸较小，因此头像应该小些，话题左边的空白也应该小一些。
图片应该保持正方形，而且两张图之间的边距应该随屏幕变化而变化
说白了，就是没有做好不同屏幕的适配，在某些屏幕下的视觉效果未能达到最优。
2本文章只关注如何适配，所以先只谈结论，后面有机会可以讲讲viewport和css像素px中的细节。
网页在viewport中布局，viewport被分成一个个小方块，一个CSS像素占一个方块
在设置了viewport宽度等于设备宽度的情况下，通过某种算法，在不同大小的屏幕上，1个CSS像素所占屏幕的物理尺寸是一样大的
长度单位rem是相对于html标签的font-size（字体尺寸）的。例如html标签设置font-size:36px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=36px*1.2=43.2px

如上面的例子，如果加载页面的时候，使用JS根据屏幕的大小动态设置html标签的font-size，随着html标签font-size的值变化，div的1.2rem换算成px的值 也跟着变化，即实现了div随屏幕大小变化而变化，而CSS代码始终是width:1.2rem。以此类推到页面所有的元素。
3业内比较流行的做法（参考阿里的flexible），有以下要点：
设置viewport为设备宽度（这里不一定，但目前先这样足矣）
将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分成10rem只是为了方便计算而已）
写CSS代码时，遇到要适配的地方，比如width，margin，padding等，就不要再用px了，改成用rem
JS和Html代码如下：
CSS代码做了类似如下的修改：
运行结果如下：边距和头像图片都随屏幕变化而变化了
看不懂代码没关系，简单解释下就是，在HTML页面加载完成之后，把页面宽度等分为若干份（这里是10份），比如页面宽度是W 像素，则 1rem = W/10 像素，后面所有用到宽度的地方，都用 rem 来换算。比如外边距、内边距等。
4现有设计师提供宽度为400px的设计稿，其中某个图片的宽度设计为20px，那么，CSS的写法就是img{width: 0.05rem;}，怎么得出这个结果的呢？

设计稿的宽度视同手机宽度，即假设有一个viewport为400px的手机 将它分成10rem，每个rem为40px; 那么图片宽度20px自然就是0.5rem;且慢，岂不是意味着，每次写到尺寸的地方，我都要先在草稿纸上把设计师给的px换算成rem？别急，sublime text 3有一款插件可以帮助你进行这个换算，你只需要输入20px，它会自动帮你换算成 0.5rem，看以下图就秒懂了
看吧，工程师手上很多工具，可以提高效率的呢~
本文由 产品100 为你推荐并呈现
文章来源：微信公众号：程序员和产品经理（devpdm）
文章作者：啃先生
友情提示：
若出处标注错误，请联系QQ：2977686517及时更正，感谢理解和支持！

少年关注我们的官方微博@产品100和微信订阅号：chanpin100ghsd，有惊喜哦！

HTML页面是如何适应不同分辨率的显示器

HTML页面何适应不同分辨率的显示器可以通过： 响应式布局 、自适应 网页设计 等方法：

1、响应式布局设计：

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的 用户体验 ，响应式布局就是实现不同 屏幕分辨率 的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和 平板电脑 上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

2、自适应网页设计：

自适应网页设计（AdaptiveWebDesign）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

扩展资料：

响应式布局与自适应布局的区别：

1、自适应布局通过检测视口分辨率，来判断当前访问的设备是： pc端 、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

参考资料来源： 百度百科-响应式布局 我爱编程网

参考资料来源： 百度百科-自适应网页设计

HTML网页如何完美的适配到移动设备上

1、在已安装的电脑桌面新建一个Word文档（演示文稿以Office2007系列为主），然后打开新建的文档，输入文字。

2、点击Word文件左上方-->另存为（A）-->其他格式-->类型选择为“网页（*.html,*htm）”-->输入文件名-->保存到桌面。

3、打开《Word超链接演示.htm》文件，在对比《Word超链接演示.doc》文件，相同的内容，不同的展示。

4、选中要链接的文字，鼠标右键，单击超链接。

5、按住Ctrl键，并单击超链接文字，就可以打开超链接网页百度首页了。

以上就是web前端开发屏幕适配 HTML页面是如何适应不同分辨率的显示器全部内容了，了解更多相关信息，关注我爱编程网。