响应式布局

原创 437396649 随笔 css 249阅读 2018-01-07 20:46:24 举报

响应式布局主要用在分辨率不同的两个设备上,比如电脑和手机。
原理就是当切换到不同的宽度时,页面的布局发生变化。
其中用到的重要的点是:
1.在<head>处添加<meda name="viewport" content="width=device-width,initial-scale=1.0">意思是 <!--宽度等于设备宽度,初始为一倍的缩放 -->
2.要link不同的css文件
<link rel="stylesheet" type="text/css" href="mobile.css" media="(max-width:768px)">
<link rel="stylesheet" type="text/css" href="computer.css" media="(min-width:768px)">
media后面的max-width指定了当宽度为多少时,用到的是哪个文件。
接下来就能设置各自的css样式了!

今天还学到了一个很巧妙的方法,初始状态菜单栏不显示,当点击菜单两个字时,菜单栏显示。
用到的是checkbox复选框!
用label标签显示“菜单”两字,设置label 的for属性为菜单的id属性;这样当点击菜单两个字时,复选框就会有反应。
将复选框display:none;
然后设置复选框伪类别:checked~ul{display:block;},表示当复选框被选中时底下的ul的display为显示。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复