tips 前端 各个设备的页面尺寸的media query 与页面高度的经验总结
有段时间 扑了一个多月的在一个wifi的前端项目上
快做完时 各种小问题一堆一堆的修复 处理了一些很零散的问题
因为页面有一个所有页面都有一个背景色 有的页面有背景图
主要重点是移动前端的方向 因为现在设备会有各种屏幕比例(16:9) 分辨率(1024px_768px) 和像素比(devicePixelRatio)
对于页面适配起来 其实有很多值得思考的对方
页面宽度上的处理很方便 可以用百分比的html body样式 或者 我使用了bootstrap 用它非常优秀的栅格化 和断点
页面高度上 我自己定了一套方案 虽然在我看来这套方案还有待提高 比如没有考虑横屏情况,还有一些细节上深入的东西可以去探究
不过工作进度要紧 你可以没完没了的死磕一个东西 去挖知识 去深入探究 但是你不能用没完没了的工作态度去处理一个项目 而滞留在每个点上,时间是宝贵的,不能随便浪费.
于是我在项目里是这样做的 用一下media query 由于只是定一下高度 所以我将媒体查询放在了引入的css文件里 没有用在引入样式文件时媒体查询的方式
由于它是通用定制多个视图的 所以将这部分放在了模板页里去引入的一个外部css文件里
/*为大屏幕设备 pc */
@media all and (min-width: 1020px){
.wrap_backgd_size{
min-height: 770px;
}
}
/*for tablet*/
@media all and (max-width: 800px){ .wrap_backgd_size{
min-height: 580px;
} }
/*页面高度定制*/
/*for iphone4 it ratio is 320x480*/
@media all and (max-width: 330px) and (max-height: 490px) and (min-height: 470px){
/*.testmedia{
color: white;
}*/
.wrap_backgd_size{
min-height: 485px ;
}
} /*for iphone 5 it ratio is 320x568*/
@media all and (max-width: 330px) and (max-height: 570px) and (min-height: 560px){
.wrap_backgd_size{
min-height: 580px ;
}
} /*for iphone 6 it ratio is 375x667*/
@media all and (max-width: 380px) and (max-height: 670px) and (min-height: 660px){
.wrap_backgd_size{
min-height: 680px ;
}
} /*for iphone6 plus it ratio is 414x736*/
@media all and (max-width: 420px) and (max-height: 740px) and (min-height: 730px){
.wrap_backgd_size{
min-height: 750px ;
}
} /*for google nexus5 it ratio is 360x640 nexus4=384x640*/
@media all and (max-width: 385px) and (min-width: 350px) and (max-height: 650px) and (min-height: 630px){
.wrap_backgd_size{
min-height: 650px;
}
}
代码贴在这里,以后可以自己再编辑改善和拿来即用
note:1.媒体查询对同一样式的规则应用原则是和css样式应用的优先级是相同的 写在后面的样式会覆盖前面样式
2.自然是使用min-height属性,定一个最小高度,可以让内容超出该区域
除了css 的方式外,还有以脚本来做用脚本来获取当前手机的屏幕上网页可视区域的大小,并设置到相应的dom 元素上 ,如
$('#bg').height(window.innerHeight);
相关参数:
window.screen.width //设备屏幕视口宽度 iphone5上320 我的安卓设备上取到了1080(此设备屏幕分辨率为1920X1080) window.screen.availWidth //测试结果同上 1080 window.innerWidth // 正确 同理高度也应取此参数 网页在设备上展示的可视区域的宽高 (比如在微信里展示时会拿到的高度是 去掉了手机顶部的时间栏和微信顶部栏64px后的高度) 的innerHeight document.body.clientWidth; //测试结果总是几乎同上,但总会比上面的多5像素,差距很小 //note: 这些参数在pc端chrome浏览器里使用f12手机设备尺寸模拟调试时总会拿到正确的参数,但在不同的实际设备上却完全不对,所以不可以pc端模拟设备取到的参数为准
tips 前端 各个设备的页面尺寸的media query 与页面高度的经验总结的更多相关文章
- 【转】页面尺寸不一样的PDF页面调整方法
本文综合参考:http://www.360doc.com/content/10/1114/22/2961363_69395272.shtml http://blog.sina.com.cn/s/blo ...
- 前端视频直播技术总结及video.js在h5页面中的应用
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12557070.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 目前有一个需求是在 ...
- web前端开发中常用的尺寸和位置
我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...
- Xamarin设备相关图片尺寸要求
Xamarin设备相关图片尺寸要求 Xamarin跨平台开发,要兼顾iOS.Android.尤其是图片方面,各个平台有对应的不同要求.在iOS中,需要提供没有后缀(设备无关单位尺寸).@2x(双倍 ...
- PDF 补丁丁 0.4.1.820 测试版发布:统一PDF的页面尺寸
之前删掉了统一页面尺寸功能,在这个版本给搬回来了. 调整页面留白的功能还没实现,请无视相关选项.
- 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面
用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...
- 我的前端工具集(八)获得html元素在页面中的位置
我的前端工具集(八)获得html元素在页面中的位置 liuyuhang原创,未经允许禁止转载 目录 我的前端工具集 有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作 如 ...
- C#+ItextSharp 查看pdf文件页面尺寸
1# Nuget下载itextSharp,下载到本地 pm>Install-Package iTextSharp -Version 5.5.10 2# 引用dll,添加命名空间 using iT ...
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
随机推荐
- 【Python 2 到 3 系列】 print 是函数
v3.0 以前,print一直作为语法结构存在,他是python语法的一部分:这个理解起来可能有点蹩脚,但的确是这样. print 一直被定以为一个statement,也就是说,他跟return/tr ...
- 面向对象特性 - php
1.类的字段调用格式 公用字段 类内调用 $this->字段名 类外调用 $对象名->字段名 静态 类内调用 self::$字段名 类外调用 类名::$字段名 常量 类内调用 ...
- 实例讲解如何利用jQuery设置图片居中放大或者缩小
大家有没有见过其他网站的图片只要鼠标放上去就能放大,移出去的时候就能缩小,而且一直保持居中显示!其实jQuery提供一个animate函数可以使图片放大和缩小,只要改变图片的长和高就OK啦!但是ani ...
- Django项目发布到Apache2.4配置mod_wsgi,解决遭遇的各种坑。
环境: Apache2.4 32bit Python 3.7.1 (v3.7.1:260ec2c36a, Oct 20 2018, 14:05:16) [MSC v.1915 32 bit (Inte ...
- bedtools
- 笔记-reactor pattern
笔记-reactor pattern 1. reactor模式 1.1. 什么是reactor模式 The reactor design pattern is an event han ...
- mysql学习第三天练习(日期和时间函数)
-- 日期和时间函数 -- 获取当前日期 select curdate(),current_date() from dual -- 返回服务器当前的日期和时间 select NOW(),SYSDATE ...
- 9.5web service基础知识
Web服务基础 用户访问网站的基本流程 我们每天都会用web客户端上网,浏览器就是一个web客户端,例如谷歌浏览器,以及火狐浏览器等. 当我们输入www.oldboyedu.com/时候,很快就能看到 ...
- leetcode 【 Merge Two Sorted Lists 】 python 实现
题目: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...
- Oracle 插入数据时获取系统时间
insert into table_xx (xx,dateTime) values( 'xx',sysdate) 这个sysdate 相当于sql server中的GETDATE()函数 另to_ch ...