本文主要包含等相关知识,匿名希望在学习及工作中可以帮助到您
回复内容：
简单说，CSS media query。具体实现就比较复杂了，比如media query各浏览器支持程度不一。此外在技术实现之前，首先你在设计层面要有这个意识。有时候，适配不仅仅是分辨率（resolution）问题，还有DPI问题。另外还有操作差异，比如触摸（手持设备）还是鼠标（desktop）还是遥控器（Web TV）。在许多场合下，还是会考虑做独立的版本，而不是在一个版本里进行适配。 实际上根本没有方法解决, 设备的密度不同js无法解决,最好的方法就是就麻烦的方法,一个按钮多做几种尺寸,多写几种组件代码 自适应不是HTML5的功能，想想在电脑上网页是怎么自适应宽度的，举个例子用width=100%就可以在不同分辨率的显示器上显示同样的效果了，HTML自推出就涵盖了这种功能，不论是显示器还是手机屏幕，其实大同小异了 自适应宽度 适配不同分辨率的设备应该是用到CSS的Media Queries（媒体查询）技术，只要设备支持媒体查询功能，应该都会识别，CSS2.1定义了10种设备类型，共有13种设备特性，详情见http://www.yiiyaa.net/1451 个人经验，分两步，完美解决：1，服务器端判断UA
2，移动设备用viewport
题主希望能够适配不同设备，肯定不是静态页面吧，毕竟用到“适配”这个词，肯定是希望不同内容能够分别占据适当的体积、能够根据页面宽度布置不同的块吧？
那么在这样的前提下，我们想要的效果显而易见，对于电脑，左右可以有边栏、可以有更细小的按钮、更多的特效，而在手机上访问的时候，要简洁、快速、省流量
所以，首先根据UA判断用户用什么设备访问，是电脑就输出适用电脑的复杂的内容+CSS，是移动设备就输出适用于移动设备的简洁的内容+CSS。
用UA还有一个好处，就是能够配合Cookie很方便地让用户自己选择适配。比如用户的UA没有识别出来，用户其实是手机+小众的浏览器，但是你提供了电脑版，用其他的方式很难想象如何去适配，但是配合Cookie，只要用户选一次版式，以后都不会出问题。甚至，我本人有时候喜欢用手机上电脑版（因为电脑版往往功能多），我们应该给用户这个自由（如果不打算给的话，就更需要检查UA了）
然后，很意外的是没有看到有人说viewport，难道大家都不做移动开发或者做的时候不去适配多平台多设备？viewport对开发者非常方便，声明以后，你只要按照屏幕宽度320px（小屏）或者360px（大屏，也可以把小屏的直接居中，这里顺便吐槽一下MX3的4xx px）去开发，不管设备物理分辨率是多少，都会按比例矢量缩放到满屏（横向，纵向不谈了）。比如viewport声明320px宽以后，iPhone 5s上满屏，800x480的安卓满屏，720的安卓满屏，1080的安卓只在两边有两个细白条，一居中就行了
是不是感觉仿佛特简单？
真的很简单，快点百度学学viewport，然后请后端同学吃个饭让他帮你搞定UA，适配多设备多平台从此不是梦 css2/css3里面有个@media ,用法如 @media all and (device-height:800px){ … } ,应该能解决你的问题吧。 通过rem 和 媒体查询结合使用