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 ...
随机推荐
- 2-ls 显示目录内容
ls list directory contents 显示目录内容 [语法]: ls [选项] [参数] [功能介绍] ls指令用来显示目录列表,在Linux系统中有着较高的使用率.ls指令的输出信息 ...
- Webpack配置示例和详细说明
/* * 请使用最新版本nodejs * 默认配置,是按生产环境的要求设置,也就是使用 webpack -p 命令就可以生成正式上线版本. * 也可以使用 webpack -d -w 命令,生成用于开 ...
- 【摘抄】将xml注释文档生成网页
config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath(&quo ...
- Hibernate原生SQL映射MySQL的CHAR(n)类型到String时出错
今天在用Hibernate通过原生SQL和ResultTransformer映射时,出现数据类型不匹配的错误.但是通过Entity映射,没有问题.在网上找了好多答案,终于解决了. 核心代码: Stri ...
- jQuery自定义插件
jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件, ( ...
- [转]xml文件中的转义字符
原文地址:http://www.cnblogs.com/zhxhdean/archive/2012/02/08/2342498.html 如果在XML文档中使用类似"<" 的 ...
- [转]response.getWriter().write()与out.print()的区别
原文地址:http://blog.csdn.net/javaloveiphone/article/details/8133772 1.首先介绍write()和print()方法的区别: (1).w ...
- Bootstrap表单布局样式
1.并排和下拉选项 <form class="form-horizontal" role="form"> <fieldset> < ...
- [转]JVM调优总结:一些概念
JVM调优总结:一些概念 原文出处: pengjiaheng 数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变 ...
- 让webstorm支持avalon语法自动补全
在file菜单下选择Settings,选择Editor ——> Inspections ——> Html ——> Unknown HTML tag attibute添加以下标签ms- ...