首页 > 代码库 > 移动端响应式布局
移动端响应式布局
<script> var pixclPation = 1/window.devicePixelRation; document.write(‘<meta name="viewport" content="width=device-width,initial-scale=‘+pixelRatio+‘,minimum-scale=‘+pixelRatio+‘,maximum-scale=‘+pixelRatio+‘" />‘); </script>
1.通过设置缩放比例，让1px做1px的事情。这样就不会出现在不同屏幕时候，1px显示不是1px的情况。
var html = document.getElementsByName(‘html‘)[0];var pageWidth = html.getBoundingClientRect().width;html.style.fontSize = pageWidth/16 + ‘px‘;
2.设置em，这样根据字体来响应式布局
html{ width: 100%; height: 100%; overflow: hidden;}body{ width: 100%; height: 100%; overflow: auto;}3.让body来控制页面的尺寸
a { //取消a标签手指按下时出现的黑色遮罩层 -webkit-tap-highlight-color: transparent; text-decoration: none;}input{ //解决ios下表单元素圆角的问题 -webkit-appearance: normal;}
移动端响应式布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。