欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > javascript >

js用rem来做响应式开发,javascript技巧

来源:未知 ?? 时间:2018-01-15 09:58?作者:小飞侠

[导读] javascript用rem来做响应式开发...

js用rem来做响应式开发,javascript技巧

电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己用原生写,响应式开发(我现在知道的尚浅)目前我了解有

1.百分比法:

顾名思义,页面的元素的margin,padding,width,height,等等都用%来计算,CSS中的百分比中的百指的是什么,指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元 素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度 (PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

2.媒体查询:

这个是css3中给出的,我们要解决的问题是适应手机屏幕,这个媒体查询正是为解决这个问题而生,媒体查询的功能就是为不同的媒体设置不同的css样 式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,最常用的形式

phone:@media screen and (max-width:767px) {/手机中样式/}

pad:@media screen and (max-width:991px)and(min-width:768) {/平板中样式/}

pc:@media screen and (min-width:992px){/电脑中样式/}

...(你还可以设置更多节点)

用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围;

3.还有就是css3的单位rem:

rem就是将根节点html的font-size的值作为整个页面的基准尺寸,例如那么1rem=10px;如何做到适配呢?那就要用到js在页面加载时获取window的宽度(浏览器窗口的宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕,那接下来我就举一个小例子。

屏幕放大缩小这三个div也同样还在一行等比放大缩小

html

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

css

<style>
  html{font-size: 20px;}
  .container{
    max-width: 640px;
    border:1px solid red;
    margin:0 auto;
    overflow: hidden;
    box-sizing: border-box;
  }
  .box{
    float: left;
    width:10.6rem;
    /我这里设置html的font-size:20px;最大
宽为640px,即相当于640/20=32rem;一行有3个div,所以每个div宽10.6rem
 
你也可以像论坛里面讲的那样设置html的font-size:62.5%;因为浏览器默认像素16px;乘以62.5%之后为整数10px;方便计算
 
    height:10.6rem;
    border:1px solid #000;
    box-sizing: border-box;
  }
</style>

js

<script>
 window.onresize = window.onload = function () {
   var w = $(window).width();
   if(w<640){
     var size = 20*w/640;/640的时候
对应html的font-size为20,那么宽度为w是对应
的font-size可这么求
     $('html').css('fontSize',size+'px');
   }
 }
</script>

注意这里有一个小坑,当你把这个小demo拿到谷歌浏览器里面验证的时候,你会发现开始这3个div会随着你浏览器窗口缩小而缩小,到达某个值后就不动了,原因是谷歌浏览器默认支持html的font-size最小值为10px;在小于这个值就不会再小了,这是我当时碰到的问题花了快两个小时上网找,一遍遍演示也都没想明白,最后终于查到这么个非人为原因.


    最新文章

    点击排行

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

    京ICP备14009008号@版权所有AG亚游集团

    网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

    网筹50万未救回白血病女孩 家人主动退还剩余43万 王峰十问陈伟星:为什么是你陈伟星 应勇参加上海团审议:在高质量发展上走在全国前列 关于贸易问题 他们都在博鳌力挺中国 湖北统计局副局长叶青谈1978:扣好人生第一粒扣子 北大经济系77级:站在拐点上的一代 地球迎来第四高温 德媒:怪特朗普政府退巴黎协定 中央巡视组:中储粮管好“大国粮仓”政治担当不够 黑龙江省委书记为这事 “强势”叫停下属发言 儿子失亿元巨奖揽体彩285万 奖金全给母亲过节 没有政府补助做支撑:科大讯飞一季利润表现及格么? 都是广告惹的祸 印度塔塔集团在印度起诉海尔
    山东媒体不把大连放眼里 足协杯正常发挥就进决赛 文在寅当选总统前夜超速被拍 自掏腰包交罚单 皇马名宿:以梅西的境界不用跑 散步就主宰比赛 Uber CEO:自动驾驶汽车还是个学生 要继续学习 郑棉涨势过于强劲 冲高后短期仍有回落风险 加西亚:比赛结果对我们不公平 对手就只有一次机会 跟风中国?俄罗斯要办非洲峰会 美国要办海湾峰会 这支中国防暴队多次获非洲一国国家奖 什么来头? 金融新风向:周小川表态数字货币 强调金融服务于实体 马克龙会见在美法国人团体 承诺将带领法走向伟大 世卫:刚果(金)埃博拉疫情尚未构成突发公共卫生事件 业绩不佳 乐天百货拟撤出中国内地市场
    忍无可忍 美政商界这个超级家族拍广告反对特朗普 中国老夫妇在美乘飞机遇车祸 美航被批服务太冷漠 欧盟理事会:欧盟将对俄罗斯制裁延长半年 中兴事件后,如何进行芯片投资?投资人分成两派 新京报:3年“不互动”的政府网站 还有必要投钱吗 气候变暖,会让野生大熊猫陷入绝境吗? 董事长飞北京给上港鼓劲 佩雷拉:发挥了顶级水平 黑龙江林业厅原党组书记肖建春被开除党籍 20岁女学生见男网友被拒后轻生 山中昏迷失联3天 三缺一棋牌游戏平台 养殖什么不愁销路 2017做什么生意有前景 白手起家怎样创业 AG亚游集团