@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. 东大OJ-Max Area

    1034: Max Area 时间限制: 1 Sec  内存限制: 128 MB 提交: 40  解决: 6 [提交][状态][讨论版] 题目描述 又是这道题,请不要惊讶,也许你已经见过了,那就请你再 ...

  2. Rest API 开发 学习笔记(转)

    Rest API 开发 学习笔记 概述 REST 从资源的角度来观察整个网络,分布在各处的资源由URI确定,而客户端的应用通过URI来获取资源的表示方式.获得这些表徵致使这些应用程序转变了其状态.随着 ...

  3. Project Serve 2013部署方法

    在线版Project2013部署手册 服务器环境要求 系统:windows server 2008r2.windows server2012x64 Sharepoint 2013 内存至少16GB,最 ...

  4. WPF 资源字典【转】

    使用好处:存储需要被本地话的内容(错误消息字符串等,实现软编码),减少重复的代码,重用样式,实现多个项目之间的共享资源;修改一个地方所有引用的地方都会被修改,方便统一风格;使用方法,归纳起来主要有下面 ...

  5. 172C

    模拟 #include<iostream> #include<algorithm> #include<vector> #include<cstdio> ...

  6. mysql-linux命令登录,退出

    linux中登录 # mysql -uroot -p 输入密码(为空就直接回车) 显示数据库 shwo databases 退出 1.按ctrl+d 2.exit 3.quit\ 4.sudo shu ...

  7. python Chrome 开发者模式消失的方法

    最近使用 Chrome浏览器跑Selenium Python 自动化脚本运行过程中,总是出现这样的对话框  出现这样的对话框,如果不能自动关闭,这个对话框会影响web端页面的其他链接的定位识别,这样就 ...

  8. 【BZOJ-2115】Xor 线性基 + DFS

    2115: [Wc2011] Xor Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2142  Solved: 893[Submit][Status] ...

  9. 【BZOJ-3573】米特运输 树形DP

    3573: [Hnoi2014]米特运输 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1023  Solved: 604[Submit][Statu ...

  10. MapReduce实现数据去重

    一.原理分析 Mapreduce的处理过程,由于Mapreduce会在Map~reduce中,将重复的Key合并在一起,所以Mapreduce很容易就去除重复的行.Map无须做任何处理,设置Map中写 ...