javascript用rem来做响应式开发
电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进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可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕，那接下来我就举一个小例子。
屏幕放大缩小这三个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;在小于这个值就不会再小了，这是我当时碰到的问题花了快两个小时上网找，一遍遍演示也都没想明白，最后终于查到这么个非人为原因.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于rem的移动端响应式适配方案(详解)
视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识,本质上离不开以下代码 <meta name="viewport" content="width=device-width, initial-scala=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
-
javascript用rem来做响应式开发
电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的.但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,所以这次我想自己用原生写,响应式开发(我现在知道的尚浅)目前我了解有 1.百分比法: 顾名思义,页面的元素的margin,padding,wid
-
vue3.x源码剖析之数据响应式的深入讲解
目录 前言 什么是数据响应式 数据响应式的大体流程 vue2.x数据响应式和3.x响应式对比 大致流程图 实现依赖收集 代码仓库 结尾 前言 如果错过了秋枫和冬雪,那么春天的樱花一定会盛开吧.最近一直在准备自己的考试,考完试了,终于可以继续研究源码和写文章了,哈哈哈.学过vue的都知道,数据响应式在vue框架中极其重要,写代码也好,面试也罢,数据响应式都是核心的内容.在vue3的官网文档中,作者说如果想让数据更加响应式的话,可以把数据放在reactive里面,官方文档在讲述这里的时候一笔带过,笔
-
Vue解读之响应式原理源码剖析
目录 初始化 initState() initProps() initData() observe() Observer defineReactive() 依赖收集 Dep Watcher 依赖收集过程 移除订阅 派发更新 notify() update() queueWatcher() flushSchedulerQueue() updated() defineProperty 缺陷及处理 Vue.set() 重写数组方法 总结 先看张图,了解一下大体流程和要做的事 初始化 在 new Vue
-
详解vue数据响应式原理之数组
目录 src/core/observer/index.js src/core/observer/array.js arrayMethods 总结 src/core/observer/index.js src/core/observer/array.js arrayMethods 当data的数组对象中本来没有某个属性,然后点击按钮动态增加某个属性的时候,此时此属性是没有get和set的,也就是没有响应式机制,如果想要让你动态增加的某个属性有响应式变化,那么就直接在数据的源头给他初始化这个属性,具
-
强大的JavaScript响应式图表Chartist.js的使用
Chartist.js是一个非常简单而且实用的JavaScript前端图表生成器,它支持SVG格式,图表数据转换十分灵活,同时也支持多种图表展现形式,不失为一款前端开发者的开发利器. Chartist.js的特点 配置十分简单,可以很方便地转换各种图表数据格式. CSS和JavaScript分离,因此代码比较简洁,使用就相对方便. 使用SVG格式,因此Chartist.js可以很灵活的在Web页面上应用. 响应式图表,支持不同的浏览器尺寸和分辨率. 支持自定义 SASS 架构. Chartist
-
使用JavaScript实现响应式计数器动画
目录 项目基本结构 1.计数动画的 HTML 代码 2.使用 CSS 设计网页 3.Counter Up box的基本结构 4.设计计数器动画的信息 5.使用 CSS 使其具有响应性 6.通过 JavaScript 激活计数器动画 完整源码下载 在本文中,我们将学习如何使用 HTML CSS 和 JavaScript创建响应式计数器动画. 我们在很多地方都可以用,比如适用于不同类型的个人网站.企业网站等. 这种类型的计数器动画最常用于商业网站.例如,如果你想在你的企业网站上显示一些产品的数量,可
-
Bootstrap开发实战之响应式轮播图
本文主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,供大家参考,具体内容如下 一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0"
-
使用bootstrap3开发响应式网站
本文实例为大家分享了bootstrap3响应式网站开发代码,供大家参考,具体内容如下 第一次使用bootstrap3,发现对移动支持得不错,可以很快的开发出一个支持移动和PC端的网站. 下面就是本文的实例,具体代码: 时间线来自国外网站,使用到的css如下 .timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position:
-
纯JS开发baguetteBox.js响应式画廊插件
baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 效果演示 下载源码 好了,看下本文重点内容. baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. Demo页面 github 中文使用 特点 纯JS编写,无任