- <span style="font-size:18px;"><html>
- <head>
- <title>1px question</title>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- <style>
- html {
- font-size: 1px;
- }
- * {
- padding: 0;
- margin: 0;
- }
- .bds_b {
- border-bottom: 1px solid #ccc;
- }
- .a,
- .b {
- margin-top: 1rem;
- padding: 1rem;
- font-size: 1.4rem;
- }
- .a {
- width: 30rem;
- }
- .b {
- background: #f5f5f5;
- width: 20rem;
- }
- </style>
- <script>
- var viewport = document.querySelector("meta[name=viewport]");
- //下面是根据设备像素设置viewport
- if (window.devicePixelRatio == 1) {
- viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
- }
- if (window.devicePixelRatio == 2) {
- viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
- }
- if (window.devicePixelRatio == 3) {
- viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
- }
- var docEl = document.documentElement;
- var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
- docEl.style.fontSize = fontsize;
- </script>
- </head>
- <body>
- <div class="bds_b a">下面的底边宽度是虚拟1像素的</div>
- <div class="b">上面的边框宽度是虚拟1像素的</div>
- </body>
- </html></span>
解决一像素问题的另一种解决方案
猜你喜欢
转载自www.cnblogs.com/chaoyuehedy/p/9178807.html
今日推荐
周排行