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 ...
随机推荐
- 【JavaEE企业应用实战学习记录】MyGetAttributeListener
package sanglp.servlet; import javax.servlet.ServletContext; import javax.servlet.ServletContextAttr ...
- BIM软件小技巧:Revit2014所有快捷键汇总表格
命令 快捷键 路径 修改 MD 创建>选择; 插入>选择; 注释>选择; 视图>选择; 管理>选择; 修改>选择; 建筑>选择; 结构>选择; 系统 ...
- mysql 注释
mysql> SELECT 1+1; # This comment continues to the end of line mysql> SELECT 1+1; -- This comm ...
- 【BZOJ 4600】【SDOI 2016】硬币游戏
http://www.lydsy.com/JudgeOnline/problem.php?id=4600 转化成nim游戏 因为对于每一个反面朝上的硬币编号可以拆成\(2^a3^bc\),选择这个硬币 ...
- 【POJ 1556】The Doors 判断线段相交+SPFA
黑书上的一道例题:如果走最短路则会碰到点,除非中间没有障碍. 这样把能一步走到的点两两连边,然后跑SPFA即可. #include<cmath> #include<cstdio> ...
- 24 映射-Map
什么是映射(Map) 映射中的每一个元素包含一个键对象和一个值对象,键不可以重复,值可以重复 key1 value1 key2 value2 key3 value3 key4 value4 key5 ...
- Linux命令:修改文件权限命令chmod、chgrp、chown详解
Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权 限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而 ...
- ASP.NET MVC 4 异步加载控制器
ASP.NET 4 Developer preview中的异步操纵器 在放弃了对.NET 3的支持之后, ASP.NET MVC 4 彻底拥抱了Task类库, 你不需求再蛋疼的给每个Action写两个 ...
- here 文档
#!/usr/bin/perl -w use strict; my $someURL = 'http://www.perl.com'; my $html = <<EOF; # EOF 可以 ...
- VS提示“项目文件" "已被重命名或已不在解决方案中”的解决办法 .
多个项目的源码在一个源代码中,其中,有一个源代码废弃不可用了.删除后,再次生成解决方案时出现了问题“项目文件" "已被重命名或已不在解决方案中”. 解决方法是: 1.找到主项目,右 ...