CSS3自适配手机屏幕
@media only screen and (max-width:350px){
.img{
width: 80px;
height:70px;
background-image: url(./images/heart2.png);
background-size: % %;
float: left;
margin-top: %;
margin-left: %;
font-size: 10px;
}
}
@media only screen and (min-width:350px){
.img{
width: 100px;
height: 85px;
background-image: url(./images/heart2.png);
background-size: % %;
float: left;
margin-top: %;
margin-left: %;
font-size: 10px;
}
}
根据屏幕大小(长宽)来调整css样式,达到手机屏幕适配的效果。
CSS3自适配手机屏幕的更多相关文章
- CSS3自适配手机屏幕[转]
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JSP 适配手机屏幕
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scal ...
- 了解真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- web app变革之rem(手机屏幕实现全适配)
以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...
- 了解真实的rem手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- Android开发——Android手机屏幕适配方案总结
)密度无关像素,单位为dp,是Android特有的单位 Android开发时通常使用dp而不是px单位设置图片大小,因为它可以保证在不同屏幕像素密度的设备上显示相同的效果. /** * dp与px的转 ...
- 真实的『REM』手机屏幕适配
rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...
- android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高
1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...
- Unity3d 手机屏幕自动适配
我提到手机自动适配的一个方法中:postion和Scale,“比例”概念适配手机.原始资源是480*800 经过实际项目考验,个人感觉: 1,UICamera是自动适配分辨率,UI上也是拉伸.放大UI ...
随机推荐
- Android AlertDialog
在Android 4.2 中不推荐使用showDialog弹窗,这里简单总结一下AlertDialog的使用方法,以后复习的时候看着方便,详细使用方法需要的时候再研究. setTitle :为对话框设 ...
- MyBatis学习--查询缓存
简介 以前在使用Hibernate的时候知道其有一级缓存和二级缓存,限制ORM框架的发展都是互相吸收其他框架的优点,在Hibernate中也有一级缓存和二级缓存,用于减轻数据压力,提高数据库性能. m ...
- [oracle] 解决ORA-30036:无法按8扩展段(在还原表空间‘XXXX’中)
select * from dba_data_files awhere a.TABLESPACE_NAME='UNDOTBS' alter tablespace UNDOTBS add datafil ...
- mysql 根据某些字段之和排序
在自己项目中记录了比赛球队获得金银铜牌的具体奖牌数,遇到需求是按照奖牌个数排序 select a.RANK_ID,a.COUNTRY,a.GOLD,a.SILVER,a.BRONZE,a.ICON,a ...
- 如何录制手机屏幕并转成gif
因为上一篇博客需要展示一些软件操作过程,如果直接截图的话一来可能需要多张图,二来表达也不方便,所以特意去查了下如何录制手机屏幕操作,然后转成gif,嵌入进博客中,这样表达起来就方便多了.话不多说,总结 ...
- 【BZOJ 2434】【NOI 2011】阿狸的打字机 fail树
完全不会啊,看题解还看了好久,我是蒟蒻$QAQ$ $zyf$的题解挺好的:http://blog.csdn.net/clove_unique/article/details/51059425 $fai ...
- 一、项目基础架构(附GitHub地址)——以ABP为基础架构的一个中等规模的OA开发日志
前言: 最近园子里ABP炒的火热.看了几篇对于ABP的介绍后,深感其设计精巧,实现优雅.个人感觉,ABP或ABP衍生品的架构设计,未来会成为中型Net项目的首选架构模式.如果您还不了解ABP是什么,有 ...
- ES6新特性:Javascript中的Reflect对象
Reflect介绍: Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflec ...
- struct和typedef struct用法
参考:http://www.cnblogs.com/qyaizs/articles/2039101.html C语言: typedef struct Student{ int score; }Stu; ...
- java高新技术-反射
一.反射的基石->Class类 定义一个类使用 class 有一个类叫Class Java程序中的各个Java类属于同一类事务,描述这类事物的Java类名就是Class. Person类代表人, ...