网页响应式问题

Question

如何根据响应式改变被选中的箭头的定位

我试过相对定位，但是浏览器窗口一改变就会改变就会错位
`@media only screen and (max-width: 1200px) {

.yuan {
    position: relative;
    left: 7px;
    top: 5px;
    background: #000;
    border-radius: 45px;
    height: 90px;
    width: 90px;
}

}

.yuan {

position: relative;
left: 14px;
top: 10px;
background: #000;
border-radius: 80px;
height: 160px;
width: 160px;

}`
上边这段代码改变浏览器窗口也不改变

Answer 1

你把两个交换一下位置，绝对就行了。媒体查询在使用时，对同一个元素改变样式，媒体查询要放到后面，是有先后顺序的，CSS在权重相同的情况下，会使用后一个的样式。 就拿你这个来讲，假设我现在屏幕缩小到1000px，它满足你媒体查询的条件是吧？但是当媒体查询那个代码过后，执行下面的代码，它也满足条件呐，这不就覆盖了嘛