做手机端时为了适应大部分手机,很多都是百分比的,但是在做一个简单模块布局时,需要满屏,这是就发现高度也要使用百分比了,好头疼。
直接设置height百分比是不管用的,首先需要设置它的父元素的height值,才能在子元素中是使用height百分比。
<div style="height: 50px">父元素 <div class="height: 50%"> 我的高度为25px </div> </div>
解决了宽高的适应,但感觉手机的分辨率差距很大,比如iPhone4 和 iPhone 6 plus的分辨率差距好大,导致两者的字体视觉感相差很大。一开始以为em能解决问题,可能是我学的不到家,还希望有大神能够指教。
不知道有没有什么好的框架可以解决。总感觉不会字体也用百分比吧,虽然有用,开发估计得疯了。
后来想到响应式布局,看到了@media screen and,这里对这个总结一下:
@media screen and可以判断设备的width和height,通过判断来改写样式。
- 在link中直接使用,判断是否引用css
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width: 600px)">
- 直接写在style中
<style> @media screen and (max-width: 600px) { .class { background: black; } } </style>
@media screen and (max-width: 600px):小于等于600px
@media screen and (min-width: 600px):大于等于600px
@media screen and (min-width: 600px) and (max-width: 800px):大于等于600px小于等于800px
关于这里面的值,我个人测了一下,应该是可视区域的大小,不是直接的分辨率大小。
可以通过window.screen.width获取设备的分辨率的width值,然后通过$(window).width()获取可视区域的width值,两者进行比较,我的手机是华为荣耀6,window.screen.width为1080,$(window).width()为980,而用@media screen and判断时,是使用的980的值为界限。
相关推荐
手机端开发
一个开发的东东 多的也不说了 自己下的看吧 相信你的选择
windows mobile 手机端开发工具
Java开发了一个强大的手机端商城及管理系统源码,本项目主要针对个人海外代购以及订货开发,随着海外代购订单日益增多,微信等手工方式已经难以管理,于是,急需一个极其简单,易用的在线的商城进行商品展示,在线...
andriod手机端开发,CI构建移动化发展,划CI时代意义的东西。
智能通讯用软件,适用于物联网各个领域(如智能家居,智慧农业,环境监测等领域),支持温湿度,PM2.5,GPS等二十多种传感器的数据传输到手机端,实现了物与人,物与物之间的通讯(即点对点通讯)。具有远程修改上报...
分享一款基于ThinkPHP5.0框架开发的自适应WAP手机端响应式界面博客系统PHP源码 查看更多关于 博客系统PHP源码 的文章 ,前端界面采用BootStrap框架设计,使得博客系统界面能自适应区分PC端和WAP手机端界面,针对不同...
采用WEUI 实现的手机端页面,比较常见的页面样式、操作模式都有,收藏
(自适应手机端)响应式网站建设软件开发小程序开发类网站pbootcms模板
HTML5手机端健康消消乐小游戏,是一款三消类休闲游戏,游戏画面精美、上手简单。
html5手机端统计图表插件
手机端打包文件,用户手机端html5开发
互联网手机端开发模板PPT模板.pptx
手机图书查询.随着3G时代的到来,移动通信技术也愈趋发达,手机已经成为人们生活中不可或缺的通信工具。...我所设计的移动图书馆就是利用J2ME技术,针对高校学生借阅书籍而开发的一款手机端应用软件。
ThinkPHP框架开发的精品网络公司整站源码无减删+微信端接口+WAP手机端-同步WEB.txt
app手机端开发综合业务管理各类图标设计PNG格式。app手机端开发综合业务管理各类图标设计PNG格式
该软件和网络调试助手不一样,它是一个APP,用户可以根据需要进行功能添加,值得学习。
html 手机端自定义弹窗效果
html5手机端上传图片
手机端Web项目开发/西安乐高云智能科技有限公司/DarrenMJ