手机、平板设备屏幕尺寸众多，宽度不一，写手机、平板对应css时最好用百分比宽度来自适应各种大小不一的屏幕宽度。这个百分比尺寸不算太难但也不是个太轻便的活，如果你css不熟练的话最好先别折腾这块，把基础练好了来。
创新互联主营勃利网站建设的网络公司,主营网站建设方案,app开发定制,勃利h5微信小程序定制开发搭建,勃利网站营销推广欢迎勃利等地区企业咨询
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE8），需要使用css3-mediaqueries.js。
你说的应该是响应式布局，这个css就能实现，有两种方法：用@media通过判断浏览器的分辨率（代码自动能判断）来调取不同的css样式。这就需要写不同的css，主要是宽度的调整。不用固定的宽度。宽度用%。
下面笔者分别从 DOM 和 Canvas 两方面去着手阐述如何做横屏适配处理。 解决DOM 的横屏适配问题 在移动端，常见的移动端适配方案是 REM 方案，而为了减少 JS 与 CSS 的耦合，笔者团队开发页面时采用的是 VW + REM 方案。
可以通过cover和contain来对图片进行伸缩。
1、w3c的html规范中有规定了引入css文件所针对的设备，可以通过在标签上添加media属性来指定所引入的css文件支持的设备，那针对手机这种移动设备，设置media属性值为handheld。
2、用js判断是不是微信浏览器打开，若是则采用对应css样式；不是就用默认css样式即可；具体代码网上一堆，一搜既有的东西。
3、设置一个js只在苹果浏览器下加载，其它浏览器不加载 if(isSafari=navigator.userAgent.indexOf(Safari)0) { document.write()；}document.write双引号的内容就是普通的css引入。
1、此时看到样式表的位置在缓存中，但那不是我们要找的CSS，www\template\qu_design\common\common.css，这才是我们要找的样式表文件。
2、改css 需要访问网址看效果，或本地访问本地地址，比如10.1。重复一下，任何一个网站系统的模板都不是直接打开看的，如果直接打开能看到完整效果，那不是网站模板，那是静态HTML网页。
3、开启diy，经过diy区域可见“编辑”点击打开，再选择“模块模板”打开，里面就是该diy区域的html代码，根据html调整css，也可自己写html和css。
4、修改.altw { width： 200px； }并上传此文件后，登录网站后台，在“界面”——风格管理——“更新CSS缓存”后再看前台效果。