现有织梦老pc网站如何修改网站模板为自适应手机

现有织梦老pc网站如何修改网站模板为自适应手机端屏幕,有以下几种方法:

工具/技能

编辑器:notepad++、dw等

技能:html、css熟练

方法/步骤

1、打开自己网站头部文件,在head标签中添加代码:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

2、修改css文件加入手机端显示的css样式就可以了

元素在pc端宽度为1440px,在css文件中加入手机端样式:@media (max-width: 640px){中间为css样式代码},

.container {

    width: 1440px;

    margin: 0 auto;

    position: relative;

}

@media (max-width: 640px)

.container {

    width: 100%;

    padding: 0 6%;

}

从网页的上面到下面依次给每个元素添加手机端样式代码,使用媒体查询功能让网页在不同屏幕尺寸展示不同的样式@media (max-width: 640px){中间为css样式代码},max-width: 640px为最大屏幕宽度640的时候显示的样式。

热门标签

热门文章

作者信息

作者头像

技术员

7年经验

专注于网站建设,拥有7年开发经验。从静态展示页到动态交互站,从PC端适配到移动端优化,独立完成从需求沟通、原型设计到代码开发、上线维护的全流程工作