PC网页兼容移动端简单修改方法

2020-12-26 08:39:18
你发给我这个页面，我看了一下，大概是这样，模板上这两块的位置

需要调换一下，也就是把

这两个标签上下换一下位置
剩下的就是调整样式表了

            @media screen and (max-device-width:801px){

            #menu {height:auto;}

            #menu .menu{width:100%}

            #menu .menu li{float:none;display: inline-block;width:30%;}

            #menu .menu li a.over{color:inherit}

            .pageLeft1{float:none;width:100%}

            .pageRight1{float:none;width:100%}

            .linkDiv .left{float:none;}

            .linkDiv .right{float:none;}

            .main{width:100%}

            }

样式表加这些，你发给我这个ablesys_advice.html基本上就够用了

2020-12-26 08:41:19
你看看效果

2020-12-26 08:42:57
导航下拉菜单这一块我没处理，移动端如果点击展开菜单，主导航就不能有链接，这个有点儿矛盾，所以需要具体情况调整，我建议是直接给子菜单展开排列，不需要点击，不过这样的话导航有点儿长

2020-12-26 08:45:55
一般移动端会这样处理，在模板上专门加一个移动端导航，当css判断宽度小于一定宽度的时候隐藏原导航，显示移动端专用效果，这样相对好一点

2020-12-26 16:45:46

2020-12-26 19:34:36
要改导航还有标签位置，工作量有点大啊。

19:56:20
所以直接隐藏切换

19:57:46
不考虑PC代码，直接增加移动端代码，判断设备大小切换另一种展示

19:58:11
现在很多这种自适应设备的网站

19:58:24
对，把导航菜单和左侧按钮都隐藏就行了。

20:02:20
@media里的类会直接覆盖上面的类吗？

20:03:35
css代码下面的覆盖上面的，复杂约束覆盖简单的

20:04:49
例如上面写了p a{} 后面再写a{}是覆盖不了前面的样式的

20:07:26
这么改了，移动端收录就会有了吧