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 ...
随机推荐
- shell 实现Linux 控制台下树形显示目录
#!/bin/bash function main(){ local pre=$1 local name=$2 echo "$pre$name" tes ...
- webservice的常用注解
定义说明书的显示方法1.@WebService(serviceName="PojoService", portName="PojoPort", name=&qu ...
- Tomcat5通过cardadm.xml启动项目
配置tomcat5\conf\Catalina\localhost下的 cardadm.xml ,然后在MyEclipse中,直接启动Tomcat5,不需要部署项目
- java中map<string,int>
java中 Iterator it=wordsmap.entrySet().iterator(); while(it.hasNext()) { Map.Entry<String,Integer& ...
- 强联通 HDU 2767 3836
n个点m条边 最少需要几条边变成强连通图 设有a个结点的入读为0, b个结点的出度为0, 则 max{a, b}就是答案. 注意特殊情况: 当原图已经强连通时, 答案是0而不是1. 加一条边少一个入度 ...
- tomcat提示警告: An attempt was made to authenticate the locked user"tomcat"
启动tomcat7之后,运行正常,但是运行一段时间就会提示以下警告: 十二月 04, 2013 5:10:15 下午 org.apache.catalina.realm.LockOutRealm au ...
- 用git管理源代码
自从做iOS开发的一年多以来,之前一直都是用svn进行代码管理.因为工作需要,我也开始用git管理源代码.关于git的基本使用,在此做一个详细的介绍,希望能对初次接触git的人有所帮助! 本篇博客针对 ...
- 【转】在mac上配置安卓SDK
众所周知的原因,google的很多网站在国内无法访问,苦逼了一堆天朝程序员,下是在mac本上折腾android 开发环境的过程: 一.先下载android sdk for mac 给二个靠谱的网址: ...
- 【C++实现python字符串函数库】strip、lstrip、rstrip方法
[C++实现python字符串函数库]strip.lstrip.rstrip方法 这三个方法用于删除字符串首尾处指定的字符,默认删除空白符(包括'\n', '\r', '\t', ' '). s.st ...
- Python 序列通用操作介绍
上一篇:python字符串基础一 下一篇:Python 列表操作简介 序列概览 Python包含6种内置的序列:列表.元组.字符串 .Unicode字符串.buffer对象.xrange对象.在序列中 ...