13518219792
需要准备的材料分别有：电脑、浏览器、html编辑器。
坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都人造雾小微创业公司专业提供企业网站制作营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的head标签中，输入meta代码：meta name="viewport" content="width=device-width, initial-scale=1"。
3、浏览器运行index.html页面，此时PC端的网页在移动端上也能自动适配。
w3c的html规范中有规定了引入css文件所针对的设备，可以通过在标签上添加media属性来指定所引入的css文件支持的设备，那针对手机这种移动设备，设置media属性值为"handheld"。示例代码如下：不过得注意：大部分的浏览器都有支持这个media属性，而小部分浏览器是不支持它的，那么如果想兼容所有的这些浏览器，建议还是为手机版本的网页单独做一套HTML和CSS，这样就不用支持pc的和支持移动终端的css写在一起然后用media来区分了。
打开网站根目录
进入static/image/mobile文件夹
mobile文件夹中有一个style.css，这个就是您要找的文件discuz手机触屏版的css样式
下面是操作图文演示
普通css怎么写就怎么写呀，公用的只是每个页面都在用的css而已
不是随便添加句话就可以自适应手机屏幕的，没这么简单。如果要自适应手机，是要用到rem单位的，然而rem又要搭配媒体查询来使用。
例如你的设计稿如果是宽720px的话，那你的文字就要以原始大小除以11.25，例如16px的话就要16/11.25这样来计算。我的意思是不用像素，用rem,因为px是写死的，rem是可以适应手机端的（包括盒子的宽高都是要以rem来计算）。另外，用之前要把下面这段代码放到你css文件里：
@media only screen and (max-width: 1080px) {
html, body {
font-size: 16.875px;
}
}
@media only screen and (max-width: 960px) {
html, body {
font-size: 15px;
}
}
@media only screen and (max-width: 800px) {
html, body {
font-size: 12.5px;
}
}
@media only screen and (max-width: 720px) {
html, body {
font-size: 11.25px;
}
}
@media only screen and (max-width: 640px) {
html, body {
font-size: 10px;
}
}
如果宽是720，就除以它相对应的那个值，如果是宽960，就除以960相对应的那个值，这么说应该可以明白吧。
纯手打，望采纳~
