【搬运工】总结H5自适应大小

原创 瞎子 随笔 JavaScript 956阅读 2016-11-08 11:09:33 举报

css自适应大小。自我感觉并不好。太麻烦。没有js动态来的好。这个也是前几天。一个笔友在前端网上发的。我存下来了。

搬运工。有什么不对的。还请各位大神指教

【搬运工】总结H5自适应大小

【搬运工】总结H5自适应大小

<title>手机端自适应大小</title>

</head>
<body>
<div>

不同的手机屏幕大小不一样,单纯用px是不合理的,于是有了rem,下面是less文件,计算rem:
designPageWidth 指代屏幕宽度,pageWidthVSfontSize指代当前屏幕下1rem表示多少px,拿到设计稿,可以根据设计稿来确定这2个值,
媒体查询的大小也可以根据需要进行修改,下面的仅供参考

html,body{
font-size: 10px;
}
@media screen and (min-width: 319px) {
html,
body {
font-size: 12px;
}
}
@media screen and (min-width: 359px) {
html,body{
font-size: 13px;
}

}
@media screen and (min-width: 374px) {
html,
body {
font-size: 14px;
}
}
@media screen and (min-width: 410px) {
html,body{
font-size: 15px;
}
}
@media screen and (min-width: 434px) {
html,
body {
font-size: 16px;
}
}
@media screen and (min-width: 559px) {
html,
body {
font-size: 21px;
}
}

@media screen and (min-width: 613px) {
html,body{
font-size: 23px;
}
}
@media screen and (min-width: 639px) {
html,
body {
font-size: 24px;
}
}
@media screen and (min-width: 719px) {
html,
body {
font-size: 27px;
}
}
@media screen and (min-width: 739px){
html,body{
font-size: 28px;
}
}

@media screen and (min-width: 767px) {
html,
body {
font-size: 29px;
}
}

@media screen and (min-width: 819px){
html,body{
font-size: 31px;
}
}
@media screen and (min-width: 939px){
html,body{
font-size: 33px;
}
}

@media screen and (min-width: 959px) {
html,
body {
font-size: 36px;
}
}

@media screen and (min-width: 979px){
html,body{
font-size: 38px;
}

}
@media screen and (min-width: 1079px) {
html,body{
font-size: 40px;
}
}
@media screen and (min-width: 1241px){
html,body{
font-size: 46px;
}
}

$designPageWidth: 375;

$pageWidthVSfontSize: 14;

@function trans($px) {
@return ( $px $pageWidthVSfontSize / $designPageWidth) 1rem;
}

</div>

</body>
</html>[/code]

下面自我感觉这种方法还是不错。在电脑上看效果。每缩小一次窗口,得刷新一次。JS控制。这个是效果是。淘宝的导航。但是是iphone6上背景定位有问题。下面已给出解决方法。

html 代码

使用方法:

(function () {
document.addEventListener('DOMContentLoaded', function () {
var html = document.documentElement;
var windowWidth = html.clientWidth;
html.style.fontSize = windowWidth / 6.4 + 'px';
// 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
}, false);
})();

// 这个6.4就是根据设计稿的横向宽度来确定的,假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';
(2)那么页面元素该如何设置宽高、边距
例如:一个设计稿宽高为140px的图标,左边距为50px,那么它的css应该这样写
.icon {
width: 1.4rem; / 像素换算rem:140px / 100 = 1.4rem /
height: 1.4rem;
margin: 0 0 0 .5rem;
}
因为html的font-size是放大了100倍,所以计算rem时,要用设计稿的实际像素除以100,140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽 的 比例 自动计算出来。
(4)关于背景图片的错位问题

1)。代码
.icon-fix {
background: none;
position: relative;
overflow: hidden;
}
.icon-fix:after {
content: '';
display: block;
width: 10000%;
height: 10000%;
position: absolute;
left: 0;
top: 0;
background-image: url(sprite.png);
background-repeat: no-repeat;
background-size: 140rem;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(.01);
transform-origin: 0 0;
transform: scale(.01);
}
.icon3:after {
background-position: 0 -280rem;
}
2)不使用雪碧图,使用单个背景图,这个时候就不存在background-position的需要,只需设定background-size: contain;即可,这样做的弊端就在于无法使用雪碧图,图片请求增多,适用于页面图标较少的情况

第三个也是JS控制,看起来貌似不错。但是没有搞懂。这个JS上面加上了设备像素比DPR。

html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复