为什么这样子 于 2019-05-31 08:34:42 在表/13.4下提问：

新手刚开始学 做的笔记 大家参考下 指出不足 关于移动端适配的问题 有index文件 有pc端css文件 新建一个mobile css文件。 其中给定meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 名字为视图 大小根据设备决定 缩放比为1 具体可见http://viewportsizes.com/ 给定移动端css文件最大宽度为xx像素 (pc端最小宽度xx像素) <link media="(max-width: 768px)"rel="stylesheet" href="css/yidong.css"> 移动端用css实现pc端的导航栏。 可以用checkbox实现 side-bar是导航栏 给定导航栏一个复选框checkbox 给定一个id <input type="checkbox" id="menu-checkbox"> 在移动端CSS样式中让他不要显示（实现了显示下级菜单点击复选框隐藏的效果） / *#menu-checkbox { display: none; */ 在移动端css样式下 把导航栏的全部下级选中（实现了隐藏下级菜单让他单击复选框显示的效果） #menu-checkbox:checked ~ .nav, #menu-checkbox:checked ~ .tag-list { */display: none; */ display:block; 用label标签指向该checkbox。 <label id = "menu-tagget" for="menu-checkbox">菜单</label> 在移动端写id的样式 #menu-tagget { display: block; position: absolute; top:10px; right:0px; font-weight: 100; color: rgba(255, 255, 255, .7); 写完就会实现移动端菜单导航做法。但是返回pc端就会有菜单字样。回到pc端样式 #menu-checkbox, #menu-tagget { display: none; 写出在pc端两个id都不显示的样式, 回到移动端发现菜单找不见 用上面移动端隐藏下级菜单样式 display：block覆盖。 <div class="side-bar"> <label id = "menu-tagget" for="menu-checkbox">菜单</label> <input type="checkbox" id="menu-checkbox"> </div>