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;在小于这个值就不会再小了,这是我当时碰到的问题花了快两个小时上网找,一遍遍演示也都没想明白,最后终于查到这么个非人为原因.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- MongoDB副本集配置
- MongoDB副本集搭建
- vhr部门管理数据库设计与编程
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)
- 权限管理模块中动态加载Vue组件
- axios请求封装和异常统一处理
- SpringSecurity中密码加盐与SpringBoot中异常统一处理
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(二)
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)
- Java操作MongoDB
- 初识MongoDB分片
- Linux上安装Redis
- SpringBoot+WebSocket实现在线聊天(二)
- SpringBoot中使用Freemarker构建邮件模板
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 解决ScrollView嵌套CridView显示问题
- Android利用zxing快速集成二维码扫描的实例教程
- Android中使用SharedPreferences完成记住账号密码的功能
- Android Intent封装的实例详解
- Android自定义Drawable实现圆角效果
- Android ApplicationInfo 应用程序信息的详解
- Android UI控件Switch的使用方法
- Android如何读写CSV文件方法示例
- Android 静默安装和卸载的方法
- Android自定义单例AlertDialog详解
- Android Build类的详解及简单实例
- Android使用CrashHandler来获取应用的crash信息的方法
- 数据魔术师小白零基础实现简单人脸识别
- Android编程实现XML解析与保存的三种方法详解
- 浅谈关于Android路由的实现