@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. 【HDU 1007】Quoit Design

    http://acm.hdu.edu.cn/showproblem.php?pid=1007 最近欧式距离模板题. 用分治大法(分治的函数名用cdq纯属个人习惯_(:з」∠)_) 一开始狂M. 后来判 ...

  2. lightoj 1370 欧拉函数

    A - Bi-shoe and Phi-shoe Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & % ...

  3. Maven 库

    mvnrepository    https://mvnrepository.com/ 最方便查询的库 <repositories> <repository> <id&g ...

  4. java-首字母大小写

    /** * 首字母小写 * * @param str * @return */ public static String toLowerCaseFirstChar(String s) { if (Ch ...

  5. xargs 命令

    1. xargs 很好用,可以将多个结果分段传给下一个命令进行计算 比如说find 找到很多个文件,又想对每个文件统计条数: find 20151201 -name "mjoys*.txt& ...

  6. [cf621E]Wet Shark and Blocks

    Description 给定$n$个数和$b$个盒子,放一些数到盒子中,使得盒子不为空.每个盒子中的数是一样的,一个数可以被放到多个盒子中. 从每个盒子中取一个数,组成一个$b$位数,如果这个数$mo ...

  7. 【BZOJ-4515】游戏 李超线段树 + 树链剖分 + 半平面交

    4515: [Sdoi2016]游戏 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 304  Solved: 129[Submit][Status][ ...

  8. BLOG搬家

    前段时间一直用的新浪blog,发现推送信息是否杂乱,所以特地投奔学长CSDN,外加之前颓废心过重,现在打算新面貌认真学习

  9. oracle merge into 的例子

    内容来自 oracle 11g 实用教程 郑阿奇等编 在 oracle 11g中有merge语句,用于根据与原表连接的结果,对目标表执行插入,更新,或者删除操作.例如,根据在一个表中找到的差异在另一个 ...

  10. Bzoj2683 简单题 [CDQ分治]

    Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 1071  Solved: 428 Description 你有一个N*N的棋盘,每个格子内有一个整数, ...