javascript用rem来做响应式开发


Posted in Javascript onJanuary 13, 2018

电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进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的值作为整个页面的基准尺寸,例如<html style="font-size:10px">那么1rem=10px;如何做到适配呢?那就要用到js在页面加载时获取window的宽度(浏览器窗口的宽度)$(window).width();在开发手机页面的时候,一般我们设置最大宽度为640px,因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕,那接下来我就举一个小例子。

javascript用rem来做响应式开发

屏幕放大缩小这三个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;在小于这个值就不会再小了,这是我当时碰到的问题花了快两个小时上网找,一遍遍演示也都没想明白,最后终于查到这么个非人为原因.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
Nov 30 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
Aug 10 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
js实现点击生成随机div
Jan 16 Javascript
深入理解ES6之数据解构的用法
Jan 13 #Javascript
详解ES6语法之可迭代协议和迭代器协议
Jan 13 #Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 #Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 #Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 #Javascript
js 索引下标之li集合绑定点击事件
Jan 12 #Javascript
简单的Vue SSR的示例代码
Jan 12 #Javascript
You might like
PHP strtr() 函数使用说明
2008/11/21 PHP
PHP 数组入门教程小结
2009/05/20 PHP
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
javascript产生随机数方法汇总
2016/01/25 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
python client使用http post 到server端的代码
2013/02/10 Python
Python 多线程Threading初学教程
2017/08/22 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python 发送邮件方法总结
2020/08/10 Python
银行实习生的自我评价
2013/12/09 职场文书
美发店5.1活动方案
2014/01/24 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
2015年元旦活动总结
2014/05/09 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
付款委托书范本
2014/10/05 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
教师个人考察材料
2014/12/16 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
外出考察学习心得体会
2016/01/18 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书
诉讼和解协议书
2016/03/23 职场文书