两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：
<link rel="stylesheet" type="text/css" href="styleA.css" media="screen and (min-width: 400px)">
意思是当屏幕的宽度大于等于400px的时候，应用styleA.css
<link rel="stylesheet" type="text/css" href="styleB.css" media="screen and (min-width: 600px) and (max-width: 800px)">
意思是当屏幕的宽度大于600小于800时，应用styleB.css
另一种方式，即是直接写在<style>标签里：
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
.class {
background: #ccc
}
}
写法是前面加@media，其它跟link里的media属性相同
其实基本上就是样式覆盖~，判断设备，然后引用不同的样式文件覆盖。
要注意的是由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
这个可以通过布局和样式解决：方法一：所有布局用百分比布局，这种方法是比较传统的。
方法二：百分比和em（一个字符的单位）相结合的；
方法三：rem为单位来写样式，需要借助JS来根据分辨率的大小调整rem
方法四：布局用rem单位，而字体用em.
第1、2两种方法是比较传统，网上随便搜搜就找得到了；第3种开始用到的rem，rem是css3新出的一种样式属性单位，类似PX；但是rem是可以人为设置大小的，也就是说rem这个单位的大小是可以设置,基于这个特性，再通过JS来根据分辨率控制这个rem的单位大小；
JS代码：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth
if (!clientWidth) return
docEl.style.fontSize = 40 * (clientWidth / 1080) + 'px'
console.log(40 * (clientWidth / 1080))
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(document, window)
这边的40是rem的自己需要单位大小（自己根据需求设置的，如果需要甚至可以改成10）；
这边的1080是设计效果图的大小，如果设计图是以宽度为2000的话，那么这边的1080就改成2000；
而em用来做字体单位的话，就可以根据不同的显示器（手机自身的设定）来显示字体，不会出现字体大的离谱，或者小的看不见的状况；
不过rem因为是CSS3的属性，在PC端的兼容性很差，不建议使用，但是移动端是非常适合的，总结就是PC端：方法一、方法二，移动端：方法三、方法四
这是很正常的现象，因为不同版本或者不同开发者开发的浏览器兼容性是不同的，所以，对于你编写的代码解析出来效果也是不同的。IE6.0允许你出现部分不规范但可以起作用的代码，而会视而不见，IE7.0有一些改进，但是依然会对一些问题也会视而不见，但是FF是目前对CSS支持最好的浏览器，而且执行较为严格，所以，如果你的CSS不规范，就会出现很难看的效果。
建议你，使用W3C的CSS检验器进行检验，只要检验通过就OK了。 基本什么浏览器都好了。
以下是部分兼容问题在不同浏览器中的表现，你参考下吧，以后注意就可以了。 应该说，写的越规范，兼容性就越强一些。使用这些hack技巧也可以解决很多问题。
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!importantmargin:28px}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30pxmargin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important
2.IE5和IE6的BOX解释不一致IE5下div{width:300pxmargin:0 10px 0 10px}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改：
div{width:300px!importantwidth /**/:340pxmargin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）
3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义：
ul{margin:0padding:0}
就能解决大部分问题。
4.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为：
<script type="text/javascript">
就可以了。
5.如果你在BOX容器里使float和text-align的方向设为一致：
{float:lefttext-align:leftmargin:0 0 0 200px}
我们可做如下修改：
{float:lefttext-align:leftmargin:0 0 0 200pxdisplay:inline}
