用rem来做响应式开发
电脑版的商城昨晚做完了,今天赶着做手机端的,提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度,保证在不同手机上都能正常显示给用户,我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好,但里面的各种样式我利用的很少,最多用到它排版,当网站最后上传的时候你会发现,即使压缩之后,它也会占用相当大的一部分,
所以这次我想自己用原生写,
响应式开发(我现在知道的尚浅)目前我了解有
百分比法:顾名思义,页面的元素的margin,padding,width,height,等等都用%来计算,CSS中的百分比中的百指的是什么,指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元 素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度 (PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。
媒体查询:这个是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){/电脑中样式/}
...(你还可以设置更多节点)
用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围;
还有就是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
根据屏幕宽度的改变动态改变html的font-size,
<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;在小于这个值就不
会再小了,这是我当时碰到的问题花了快两个小时上网找,
一遍遍演示也都没想明白,最后终于查到这么个非人为原因...
转载于:https://www.cnblogs.com/yzb23/p/6493126.html
用rem来做响应式开发相关推荐
- 关于响应式开发的设计规范
◆ ◆ ◆ 一.响应式开发知识要点 本段内容由艾艺前端技术部Jay给大家分享: 现在都流行说做响应式开发,然而什么是响应式开发呢? 专业术语-响应式 简单来说,就是页面应该有能力去自动响应用户的设 ...
- flex如何做响应式设计_响应式设计-您做错了!
flex如何做响应式设计 Responsive design is not just about the web that automatically adjusts to different scr ...
- 浅谈响应式开发与自适应布局!
谈到响应式,大家不自觉的会想到什么? 首先映入眼帘的便是随着网页宽度变化而网页内容呈现出不同内容的效果!那么由来是什么呢? 2009时间段,互联网发生了一件天大的事情! 那就是在北京时间2009年6月 ...
- Web前端面试指导(四十四):什么是响应式开发?
题目点评 响应式开发是前端开发工作比较常见的工作内容,随着移动端的发展,网页设计必须考虑到移动端的设计,同一个网站为了兼容PC端和移动端显示,响应式开发是前端开发人员必备的技术,所以响应式开发的技术必 ...
- 【PWA】响应式开发
PWA 是专门应对手机开发而提出的概念,不过,由于手机端在国内四分五裂的局面看来(还包括 PC/Pad),屏幕尺寸的不同,网页设计的样式和大小当然也是完全不一样的.为了让 Web 能完美的在多端上运行 ...
- 移动web网页开发——项目:生活资讯网(响应式开发)
前两篇内容讲述了流式布局,flex布局,rem适配布局,响应式布局四种布局页面,今天我们就以学习的内容来完成项目"生活资讯网"的设计. 我们在设计开发生活资讯网可以选择的开发方式很 ...
- 移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
- 微金所页面制作(Bootstrap 响应式开发 栅格布局 响应式布局)
该页面适用于 PC端 和 移动端,在响应式开发的媒体查询下能够适配所有屏幕. 一.页面效果 二.结构样式说明 (需引入bootstrap 相关样式文件) 结构分为八块: 头部块:.wjs_header ...
最新文章
- 再次证明消息四元组的处理顺序。
- JAVA基础知识(1)
- 7-Zip将一个大文件压缩成多个小的压缩包
- 区位码\机器码\内码关系
- [Leetcode][第214题][JAVA][最短回文串][KMP][RK]
- ipython jupyter区别_ipython jupyter notebook中显示图像和数学公式实例
- 阿里文娱首次公开!AI 如何对爆款内容未卜先知?
- CentOS 5安装mplayer
- 《ELF》即插即用!解决长尾问题!GTUIUC联合提出基于Early-Exiting的网络框架,涨点并加速!...
- centos7桌面脚本双击运行
- Visual Studio新建的源文件的默认编码
- 我在公司内部的分享(秒针系统)
- Python:程序生成Windows可执行文件/不显示命令执行窗口/无法生成exe报错TypeError: an integer is required (got type bytes)解决方法
- MacOS Ventura 13.0 Beta6 (22A5331f) 带 OC 0.8.4 三分区原版黑苹果镜像
- Python衍射初步
- 山石网科Hillstone防火墙L2TP详细配置步骤(官方最新版)
- 如何查看一个期刊是sci几区以及影响因子 入藏号 ISSN等信息
- project02:阶段性总结
- 画论21 刘道醇《五代名画补遗》
- 余世维 - 老板首先要诚实