响应式

我怕爱的太早我们不能终老 提交于 2019-12-14 01:41:31

流式布局

百分比布局也叫作流式布局、弹性盒布局。手机网页没有版心,都左右撑满。
百分比能够设置的属性是width、height、padding、margin。其他属性比如border、font-size不能用百分比设置的。

  • 如果用百分比写width,指的是父元素width的百分比。
  • 如果用百分比写height,指的是父元素height的百分比。
  • 如果用百分比写padding,那么指的是父元素width的百分比,无论是水平的padding还是竖直的padding。
  • 如果用百分比写margin,那么指的是父元素width的百分比,无论是水平的margin还是竖直的margin。
  • 不能用百分比写border的宽度

接下来我们看一个例子:

1234567891011
div{  width:200px;  height:300px;  padding:10px;}div p{  width:50%;  height:50%;  padding:10%;   }/*此时p的真实宽度是多少?*/

640?wx_fmt=png

此时p的真实宽度是140px*190px

媒体查询(media query)

1.为什么响应式 Web 设计需要媒体查询
CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询,光用CSS是无法大大修改网页外观的。这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则,比如屏幕方向水平或垂直、视口或大或小等等。弹性布局虽然可以让设计适应较多场景,也包括某些尺寸的屏幕,但有时候确实不够用,因为我们还需要对布局进行更细致的调整。

2.媒体查询语法
我们在媒体查询外面写的第一条规则,是“基本的”样式,它适用于任何设备。在此基础上,我们再为不同视口、不同能力的设备,渐进增加不同的视觉效果和功能。

123456789101112131415161718
body {    background-color: grey; } @media screen and (min-width:1200px){    body{        background-color: pink;    }} @media screen and (min-width:700px) and (max-width:1200px){    body{    background-color: blue;    }}@media screen and (max-width:700px){    body{    background-color: orange;        }}

其中@media就表示媒体查询,查询现在看这个网页的设备是什么,以及它的宽度是多少。screen表示看这个网页的设备是显示器,而不是残疾人听力设备、也不是打印机。后面用and符号罗列所有的可能性。
值得注意:媒体查询只能包裹选择器,不能包裹k:v对儿。
IE6、7、8不支持媒体查询,也为了防止手机端的某些浏览器不支持媒体查询,所以不要把所有的选择器都放在媒体查询里面。

rem响应式布局

rem响应式布局思想

  1. 一般不要给元素设置具 大专栏  响应式体的宽度,但是对于一些小图标可以设定具体宽度值
  2. 高度值可以设置固定值,设计稿有多大,我们就严格写多大
  3. 所有设置的固定值都用REM做单位(首先在HTML中设置一个基准值:PX和REM的对应比例,然后在效果图上获取PX值,布局的时候转化为REM值)
  4. JS获取真实屏幕的宽度,让其除以设计稿的宽度,算出比例,把之前的基准值按照比例进行重新的设定,这样项目就可以在移动端自适应了

什么是rem,它与em有何区别

rem:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
em:表示父元素的字号的倍数。(特例:在text-indent属性中,表示文字宽度)

body →font-size:20px;

→ font-size:2em; box1

→ font-size:2em; box2

→ font-size:2em; box3

640?wx_fmt=png

em为单位的时候,font-size属性是计算后继承,box1计算出来是40px。那么里面的box2、box3继承的都是40px。em单位不仅仅可以用来设置字号,还可以设置任何盒模型的属性,比如width、height、padding、margin、border
rem有一点优势就是可以和媒体查询配合,实现响应式布局:

@media screen and (min-width: 320px) { html {font-size: 14px;} } @media screen and (min-width: 360px) { html {font-size: 16px;} } @media screen and (min-width: 400px) { html {font-size: 18px;} }

运用场景

如果我们做的H5页面只在移动端访问,这是因为REM不兼容低版本的浏览器。而如果移动端和PC端公用一套代码,建议使用流式布局。

如何做个REM响应式布局

1、从UI设计师拿到PSD设计稿,然后在样式中给HTML设定一个font-size的值,我们一般都设置一个方便后面计算的值,例如:100px

html{
font-size:100px;//1rem=100px
}

2、写页面,写样式
首先按照设计稿的尺寸来写样式,然后在写样式值的时候,需要把得到的像素值除以100计算出对应的REM的值。
值得注意的是:真实项目中外层盒子的宽度我们一般还是不写固定值,沿用流式布局法的思想,我们用百分比的方式布局

margin:0 0.2rem
height:3rem;

3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
例如:设计稿宽度为640px,其中有一个部分是轮播图,它的尺寸是600*300,在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem,那如果手机屏幕宽度为375px,其font-size应该设置为多少。

375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小

根据当前屏幕宽度和设计稿宽度的比例,动态计算一下当前宽度下的fontsize值应该是多少,如果fontsize的值改变了,之前设定的所有REM单位的值自动会跟着放大或者缩小。可以通过以下这段代码实现:

但如果当前屏幕宽度大于设计稿宽度,图片会被拉长而失真,所以以上代码需要稍微做些修改:

12345678910111213141516171819
//html部分<section id="main"><div class="box"></div></section>//js部分<script>function(){  var desW=640,  winW=document.documentElement.clientwidth,  ratio=winW/desW;  var oMain=document.getElementById(“main“);  if(winW>desW){  oMain.style.width=desW+"px";  oMain.style.margin="0 auto";  return;}document.documentElement.style.fontSize=ratio*100+'px';}();</script>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!