anguler 画面布局适应屏幕大小_前端开发分辨率自适应-优快云博客

本文介绍了如何使用Angular实现画面布局适应不同屏幕大小，通过监听窗口resize事件动态调整html字体大小，实现响应式设计。同时，利用CSS的@media查询进行屏幕宽度小于500px时的背景颜色改变，提供了一种基本的全屏宽度和分辨率适配解决方案。

不管是做Web前端开发的，还是做移动端H5开发的，都会受到全屏分辨率自适应的困扰，下面我们就分享一下CSS解决分辨率自适应的几种方法。

一、meta标签1、H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。2、viewport(1)viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"(2)手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中，通常这个虚拟的"窗口"(viewport)比屏幕宽，这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局)，用户可以通过平移和缩放来看网页的不同部分。3、viewport标签<meta name="viewport” content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>4、viewport标签属性

属性名	取值	描述
width	正整数或device-width