html中如何处理分辨率问题

[我喜欢学偷懒]

刚刚学html做了个静态JD网页，在台式电脑中分布很好可是到了笔记本当中div出现错位

[zpjshiwo77]

自行百度，响应式开发

[KK3K2005]

单列布局的 页面 才适合 响应式开发 复杂布局 大小屏幕 肯定要各做一套 大家都想做一套页面 各种屏幕适应 其实是不现实的 各种屏幕能放的设计页面 是因为 我们都是针对小屏幕设计的页面

[我喜欢学偷懒]

[sinat_35308005]

多个浏览器运行一下

[我喜欢学偷懒]

没用啊,是电脑分辨率不同啊

[我喜欢学偷懒]

我的问题就是怎么自动适应不同分辨率的电脑浏览器

[cocotsau]

你需要重置默認CSS樣式，來消除不同瀏覽器之間的影響。例如：body,ul,ol,h1,p{margin:0;padding:0;} *{box-sizing: border-box}

[我喜欢学偷懒]

是不同的电脑有不同分辨率如何让网页自适应不同分辨率

[从小就很呆]

@media only screen and (min-width: 1024px) { .mainDiv { width: 1024px; margin: auto } .contentBox ul { list-style: none; margin: 1%; } .contentBox img { width:150px; height:200px; border-radius:5px; } } @media only screen and (min-width: 400px) and (max-width: 1024px) { .rightBox { width: 50%; height:100% background-size: 100% auto; background-repeat: no-repeat; background-image:url(http://img.alicdn.com/tps/i2/TB1SklzIpXXXXXtXVXXgalVIXXX-810-480.jpg) ; } .leftBox { width: 40% } .contentBox ul { list-style: none; margin: 5%; } .contentBox li { float: left; width: 100px; height: 100px; border: 1px solid gray; border-radius:5px; background: #CCC; margin-left: 5px; margin-top: 3px; line-height: 30px; float: left; cursor:pointer; } .contentBox img { width:100px; height:100px; border-radius:5px; } } @media only screen and (max-width: 400px) { .leftBox{ width: 98%; height:300px; display:none } .rightBox { width: 98%; height: 200px; background-size: 100% auto; background-repeat: no-repeat; background-image:url(http://img.alicdn.com/tps/i2/TB1SklzIpXXXXXtXVXXgalVIXXX-810-480.jpg) ; } .contentBox ul { list-style: none; margin: 0; } .contentBox li { float: left; width: 100px; height: 100px; border: 1px solid gray; border-radius:5px; background: #CCC; margin-left: 5px; margin-top: 3px; line-height: 30px; float: left; cursor:pointer; } .contentBox img { width:100px; height:100px; border-radius:5px; } }

[qq_34431829]

[o u w c]

是不是定位用的太多了。