在制作网站的时候,很多人都为要做电脑版模板,也要做手机版模板而发愁,其实是可以通过css编写自适应的样式,实现电脑网站自适应手机访问,那要怎么操作呢?接下来小编就演示操作步骤。
工具/原料
1
PhpStorm 2016.3.2
2
dedecms5.7 utf8 PC网站
方法/步骤
1
运行PhpStorm工具,新建一个css文件/public/css/w.css,添加如下代码:@media screen and (max-width: 640px) { }
2
在PhpStorm工具中,打开dedecms网站的所有模板文件,添加css文件w.css的引用。
3
在模板文件中,
的中间添加下面这样代码。4
编辑/public/css/w.css样式文件,在@media screen and (max-width: 640px) 这段代码的大括号中写手机版样式。手机版样式书写完成,网站自适应手机访问就做好了。
总结:
1、
之间添加代码: 2、新建css样式,引入到各个模板中:3、在w.css中重写css样式,适应手机访问所需。注意事项
1
模板中必须添加 viewport
2
重写的样式必须写在@media screen and (max-width: 640px) 这段代码下的大括号中
上一篇:用电脑做一个文字网站
下一篇:web前端是做什么的