1.Viewport。一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：<meta name="viewport" content="width=device-width, initial-scale=1.0">。
2.网格视图。使用网格视图让向网页添加元素很简单。在创建响应式网格视图时，一定要确保所有的HTML元素都有box-sizing属性且设置为 border-box。
3.媒体查询，使用@media查询，你可以针对不同的媒体类型定义不同的样式。实例：@media only screen and (orientation: landscape) {
body {
background-color: lightblue
}
}
b这一类的元素都是a的同级元素并且是a元素之后的就可以a:hover~b{....}
完美解决 ，经测试！
附上我自己的代码：
ul li a img:hover ~h3 {padding-bottom: 10px
color: #25AAFF!important
border-bottom: 2px solid #25AAFF
}
