手机端与pc端页面html5,浅谈pc和移动端的响应式的使用
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下:
1.响应式跟自适应有什么区别?
有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的.
自适应是最早出现的,后面才有了响应式。响应式布局等于流动网格布局,而自适应布局等于使用固定分割点来进行布局。
如下图所示,对于同一个页面(图中的Html),如果用响应式布局来处理的话,用不同设备(电脑、平板、手机)去访问此页面,最后看到的布局和内容有很大不同。
而如果用自适应布局去处理的话,那不管访问设备如何的不同(下图是三台尺寸不一样的手机),最后看到的页面内容和布局基本上还是一样的,就是尺寸略有不同。
响应式网站:https://www.microsoft.com/zh-cn/
自适应网站:http://m.ctrip.com/html5/
2.实现响应式有哪几种方式?
1.使用媒体查询(Media Query) 结合 rem字体
记住,先在
标签里加入这个meta标签(设置设备按照一比一的尺寸进行显示,并且禁止用户缩放页面):
其次是媒体查询,这个大家应该都知道,这个是响应式最重要的部分。
如果大于1000px,就用:
@media screen and (min-width:1000px){...} 对应PC端页面
如果在小于1000px和大于768px之间:
@media screen and (max-width:1000px) and (min-width:768px) {...} 对应平板端页面
如果小于768px:
@media screen and (max-width:768px){...} 对应手机端页面
然后是rem字体,rem是css3新出的单位,是指相对于根元素的字体大小的单位。一般设置在html,body,结合媒体查询我们可以这样写:
@media screen and (min-width:1000px){
html,body{
font-size:14px;
}
}
@media screen and (max-width:1000px) and (min-width:768px){
html,body{
font-size:13px;
}
}
@media screen and (max-width:768px){
html,body{
font-size:12px;
}
}
然后在样式表里面,把px单位都转换为rem,这样rem就会根据我们在html,body设置的字体单位进行自动缩放的过程.
至于1px等于多少rem呢,我习惯是100px等于1rem,这样做的好处有两点:
第一,谷歌浏览器的默认字体是12px,小于就失效,如果1rem等于10px的话是没有任何效果的.第二,容易换算,例如我们15px的话,就写0.15rem.
当然还有几种比较方便的,如果你有使用webpack的话,可以使用postcss-pxtorem 或者 px2rem-loader,它们会把你写的样式打包的时候自动转换为rem,具体网上有教程.
转换前:
转换后:
还有一种就是使用sublime text的插件, cssrem 神器!在你输入的时候就自动转换了.
这里介绍一种用js自动计算rem的方法,可以不用到媒体查询:
// 基准大小 相当于窗口缩放到设计稿的尺寸时body的字体大小 这里设置100px 方便计算
const baseSize = 100
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于1280宽的缩放比例,可根据自己需要修改。1280是设计稿的宽度
const scale = document.documentElement.clientWidth / 1280;
let autoWidth = Math.round((baseSize * Math.min(scale, 2)));
//判断页面缩放到小于99px的字体时 就不再缩小 防止内容溢出
if (Math.round((baseSize * Math.min(scale, 2))) <= 99) {
autoWidth = 99;
}
// 设置页面根节点字体大小
document.documentElement.style.fontSize = autoWidth + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
这样只要把样式表的px单位都转换为rem即可.
2.使用插件(bootstrap)
栅格化布局,本例利用bootstarp的栅格系统
根据上图可以看到,只要在class加上bootstrap独有的Class前缀,就可以使用bootstrap了,当然你得先引入bootstrap的插件.示例:
这段代码的意思是在小于768px的尺寸下,这个div是占用一半的位置的,而在>=768px且<992px直接,这个div只占三分之一的位置.
这样就可以根据不同的屏幕尺寸来达到响应式效果.
3.使用弹性布局(flex)
由于弹性布局涉及的知识点比较多,后续会更~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
手机端与pc端页面html5,浅谈pc和移动端的响应式的使用相关推荐
- 浅谈vue 之双向绑定和响应式(vue的响应式)
初识vue小伙伴通常都会被他的双向绑定所感叹,神奇?方便?而且在不少的面试中也会被面试官问到,上来就是:请问vue双向绑定的原来是什么?我们就来研究研究这是个什么东西: v-model 官方其实已经说 ...
- pc端rem适配_浅谈pc端rem字体设置的问题
1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTO ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- Unity iOS打开AppStore评星页面,浅谈Application.OpenURL()方法。
http://fairwoodgame.com/blog/?p=38 Unity iOS打开AppStore评星页面,浅谈Application.OpenURL()方法. Posted in Uni ...
- HTML5期末大作业:游戏网站设计——响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述
HTML5期末大作业:游戏网站设计--响应式游戏网站(24页) HTML+CSS+JavaScript 关于制作网游网页主题论述 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- 前端页面开发浅谈:PC 端设计如何“完美”迁移到移动端?
文章目录 前言 一.我真的需要一个登录页面吗? 1.1.用户眼中不确定持续使用的系统 1.2.免登陆实现的功能可以满足用户需求 二.举个移动端登陆例子 三.前端学习不是造火箭 四.前端的布局设计 五. ...
- html图片手机端不清楚,HTML+CSS图片大小自适应~PC电脑端、手机端
写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况: div{width:400px;height:400px;border:1px solid #000; } img{width:100%; ...
- html5手机端纵向时间轴,HTML+CSS实现时间轴(移动端)
html: 01:06 HTML5+CSS3实现的响应式垂直时间轴faffHTML5+CSS3实现的响应式垂直时间轴 12:25 jQuery+PHP动态数字展示效果 12:20 PHP操作Sessi ...
- 浅谈客户端与服务端的加密通讯(HTTPS/AES/RSA/RequestBodyAdviceAdapter/ResponseBodyAdvice)
目录 前言 HTTPS与SSL证书 AES对称加密 RSA非对称加密 AES + RSA 组合加密 服务端请求参数解密拦截器RequestBodyAdviceAdapter 服务端返回参数加密拦截器R ...
最新文章
- 周鸿祎称不理解35岁程序员被「抛弃」,网友:你招吗?
- 尝试修改源码需要用到git存一下
- java 持续交付_【Java架构:持续交付】一篇文章搞掂:Jenkins
- 数据结构与算法-时间复杂度的级别-时间复杂度的算法
- 决策报表服务器安装_无服务器流处理如何使决策更加容易
- 【codevs1281】Xn数列,矩阵乘法练习
- JQuery Lightbox -- 一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本
- 用Docker在一台笔记本电脑上搭建一个具有10个节点7种角色的Hadoop集群(上)-快速上手Docker...
- Uniapp 微信小程序登陆页面
- 机器学习之分类算法--mnist手写体识别
- Apache Tomcat 文件包含漏洞(CNVD-2020-10487/CVE-2020-1938)
- 不用电路控制的机器人!加州大学开发出气动逻辑系统,能用意想不到的方式弹钢琴...
- Gnirehtet使用教程 —— 将电脑网络通过USB共享给Android 设备
- IDEA的介绍基础运用和优化还有各种功能(超级全!!多图!!)
- 计算机主机故障有哪些,电脑主机电源常见的问题与解决方法_电脑故障
- w10计算机运行特别卡,win10会很卡,详细教您怎么解决
- KE-之单机案例分析
- python控制泰克示波器捕捉触发波形
- 现在的千兆光猫都自带路由功能,是否就不需要路由器了?
- 基于SpringBoot+Vue的学生成绩管理系统
热门文章
- word2016取消首字母大写 带图详细讲解
- java使用javax.mail包发送电子邮件:设置账号、密码、主题、文本、附件
- OPNET网络仿真分析-1.4、OPNET文件存储内容
- matlab2c使用c++实现matlab函数系列教程-zeros函数
- redmine 自己定义字段mysql表结构
- Linux操作系统下的多线程编程详细解析----条件变量
- 苹果电脑获取Android Studio的发布版SHA1和开发版SHA1
- Mybatis 图解
- Recommender Systems协同过滤
- oracle错误ORA-00604 递归sql级别1出现错误 ora-00942 表或试图不存在 ORA-06512 在line 11...