移动端响应式布局基础
来源:互联网 发布:淘宝友情链接有什么用 编辑:程序博客网 时间:2024/06/06 01:03
搭建一个H5页面,我们需要在head中添加一个meta标签
快捷键:meta:vp + tab键
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
viewport:视口
width=device - width 设置视口的宽度等于设备的宽度,如果不设置的话,默认视口宽度为980px。通俗的理解:我们这个操作其实就是告诉当前的浏览器按照多少宽度来渲染页面,换句话说,就是展示当前这个页面的区域一共有多宽(浏览器的宽度)
user-scalable=no 禁止用户手动缩放
initial-scale=1.0 设置屏幕默认的缩放比例
maximum-scale=1.0 设置屏幕最大的缩放比例
minimum-scale=2.0 设置屏幕最小的缩放比例
/*正常普通屏*/ .box { background: url("ban.jpg") no-repeat; } /*2倍屏*/ @media all and (-webkit-device-pixel-ratio: 2) { .box { background: url("ban@2x.jpg") no-repeat; } } /*3倍屏*/ @media all and (-webkit-device-pixel-ratio: 3) { .box { background: url("ban@3x.jpg") no-repeat; } }
媒体查询:@media
->媒体设备:all所有设备 screen所有屏幕设备PC+移动端 print打印机设备...
->媒体条件:指定在 什么样的条件下执行对应的样式
@media all and (max-width: 319px) { /*宽度小于320px*/ .box { height: 110px; } } @media all and (min-width: 320px) and (max-width: 359px) { /*宽度大于等于320px小于360px*/ .box { height: 120px; } }
苹果手机的尺寸:5s以下都是320px 6是375px宽度 6plus是414px
常用的安卓机尺寸:320, 360, 480, 540, (640, 720...)
在真实项目中,设计师给我们的设计稿一般都是640*1136 / 640*960 / 750*1334
响应式布局的解决方案:
①流式布局法:
->一般是用在PC端和手机端共用一套前端页面
->容器的宽度一般都不写固定的值,而是使用百分比(相对于视口区域宽度的百分比)
->其余的样式:字体,高度,margin,padding等等都按照设计稿上标注尺寸的一半来设置
->对于有些屏幕尺寸下,我们设置的固定值看起来不是特别好看的话,使用@media进行微调整
特殊情况:
设计师的设计稿是640px的,我们的素材图也是640px,这样iPhone6以及6plus展示的时候,图片不够大,对于这种情况就和UI设计师要1280px大图
@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px) { .box { background: url("ban@big.jpg") no-repeat; } } @media all and (min-width: 641px) { .box { background: url("ban@big.jpg") no-repeat; } }
②REM响应式布局
->我们做的H5页面只在移动端访问(REM不兼容低版本的浏览器)
->REM:当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
-> html{
font-size: 100px; //1REM = 100px
}
Width: 2rem; 这样就是相当于width=200px
Height:2rem;
按照平时如果想要让页面中的所有比例所有一半,就需要修改所有的单位为px的值,而采用rem的话,只需要改变font-size: 50px;
这样就代表1REM = 50px,所以
Width: 2rem; 这样就是相当于width=100px
Height:2rem;
步骤:
①从UI设计师拿到设计稿(PSD格式的设计稿)640*1136
②在样式中给HTML设定一个font-size的值,我们一般都设置一个方便后面计算的值,例如:10px,100px...这里我们之所以用100px,主要是浏览器最小的字体大小都是12px,用10px比例计算的结果和真实UI设计稿会存在那么一点点的偏差
html{
font-size: 100px; //1REM = 100px
}
③写页面,写样式
完全按照设计稿的尺寸来写样式,此时不用管任何的事情,设计稿给你的高度,宽度,字体大小,margin,padding的值是多少,我们就写多少
但是我们在写样式值的时候,需要把得到的像素值除以100,计算出对应的rem的值,我们设定的也都是rem的值
值得注意的是:真实项目中外层盒子的宽度我们一般还是不写固定值,沿用流式布局法的思想,我们用百分比的方式布局
④根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size
设计稿 640 600*300 font-size=100 6rem*3rem
手机: 320 300*150 font-size=50 6rem*3rem
手机: 375 351.5625*175.78125 font-size=58.59375 6rem*3rem
根据当前的屏幕宽度和设计稿宽度的比例,动态计算一下当前宽度下的fontsize值应该是多少,如果fontsize的值改变了,之前设定的所有rem单位的值自动会跟着放大或者缩小
~function () { var desW = 640, winW = document.documentElement.clientWidth, ratio = winW / desW, oMain = document.querySelector(".main"); if (winW > desW) { oMain.style.margin = "0 auto"; oMain.style.width = desW + 'px'; return; } document.documentElement.style.fontSize = ratio * 100 + 'px';}();
- 移动端响应式布局基础
- 移动端基础及响应式布局
- 移动端响应式布局
- 移动端响应式布局通用代码
- 移动端开发-响应式布局
- 响应式布局和移动端操作
- 移动端布局基础
- 【移动端】使用REM进行的响应式布局
- 初学者如何写移动端响应式布局
- 前端开发-移动端(3)- 响应式布局
- 第30篇 移动端响应式布局页面实现
- 响应式布局基础三:webapp布局
- #移动端响应布局课总结
- 移动web之响应式布局
- 移动web开发响应式布局总结
- 响应式布局 移动到下方
- 响应式布局基础二:设置viewport
- PC端移动端兼容响应式布局页面的制作
- php 获取开始日期与结束日期之间所有日期
- 数组操作方法concat,slice和splice
- 使用Vue-cli打包,dist目录内的index.html文件双击使用浏览器打开报错
- 开通博客的第一篇小记
- 查找一个字符串中第一个只出现两次的字符
- 移动端响应式布局基础
- bzoj2326[HNOI2011]数学作业 矩阵乘法
- execute,executeQuery和executeUpdate的区别
- java从url中获取域名和虚拟目录
- 用EL表达式未生效
- 关于lamp去掉index.php
- 泛型
- mysql创建数据库和表并指定编码和校验集
- QT 中使用BeaEngine 反汇编引擎