@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自适配手机屏幕的更多相关文章

  1. CSS3自适配手机屏幕[转]

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. JSP 适配手机屏幕

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scal ...

  3. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  4. web app变革之rem(手机屏幕实现全适配)

    以往web移动适配,常规写法是:media only screen @media only screen and (min-device-width: 320px){ //针对iPhone 3 } @ ...

  5. 了解真实的rem手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  6. Android开发——Android手机屏幕适配方案总结

    )密度无关像素,单位为dp,是Android特有的单位 Android开发时通常使用dp而不是px单位设置图片大小,因为它可以保证在不同屏幕像素密度的设备上显示相同的效果. /** * dp与px的转 ...

  7. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  8. android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高

    1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...

  9. Unity3d 手机屏幕自动适配

    我提到手机自动适配的一个方法中:postion和Scale,“比例”概念适配手机.原始资源是480*800 经过实际项目考验,个人感觉: 1,UICamera是自动适配分辨率,UI上也是拉伸.放大UI ...

随机推荐

  1. js中奇特的for循环写法

    //正常的for循环 for(var i=0;i<10;i++){ console.log(i); } //输出:1,2,3……10 //简写 for(var i=10;i--;){ conso ...

  2. 1121高性能MySQL之运行机制

    本文来自于拜读<高性能MySQL(第三版)>时的读书笔记作者:安明哲转载时请注明部分内容来自<高性能MySQL(第三版)> MySQL的逻辑构架 MySQL服务器逻辑架构 最上 ...

  3. confluence的安装、备份和恢复(wiki)

    还有一种比较不错的wiki工具MediaWiki 安装教程参考 http://pangge.blog.51cto.com/6013757/1560249 我是按照上面的教程搭建的 还有几篇不错的文章 ...

  4. 【BZOJ 3735】苹果树 树上莫队(树分块+离线莫队+鬼畜的压行)

    2016-05-09 UPD:学习了新的DFS序列分块,然后发现这个东西是战术核导弹?反正比下面的树分块不知道要快到哪里去了 #include<cmath> #include<cst ...

  5. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  6. 算法与数据结构之顺序查找(C语言)

    #include<stdio.h> #include<stdlib.h> //顺序查找基本思想:从线性表的一端开始,逐个检查关键字是否满足给定的条件 int Sequentia ...

  7. double截取小数点位数

    (double)decimal.Round(decimal.Parse((planVoSt.TotalCompleteAmount / planVoSt.TotalUserCount).ToStrin ...

  8. python-汉诺塔递归实现

    摘录自廖雪峰老师教程下的评论,个人备忘,脑细胞已死光 def move(from,to): #将盘子从from移动到to,动画效果需要脑补 print(from,'->',to) def han ...

  9. poj3335 半平面交

    题意:给出一多边形.判断多边形是否存在一点,使得多边形边界上的所有点都能看见该点. sol:在纸上随手画画就可以找出规律:按逆时针顺序连接所有点.然后找出这些line的半平面交. 题中给出的点已经按顺 ...

  10. JDBC链接MySQL

    首先,这里的JavaWeb使用JDBC的方法与Java的使用方法相似,但是有不同之处: 在Java中导入驱动包以后,直接用DriverManager.getConnection()获取连接对象, 而在 ...