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 ...
随机推荐
- tr命令
tr命令是linux下一个字符处理命令,用途: 字符替换 字符删除 字符压缩形式:tr [OPTION]... SET1 [SET2]接口:输入输出都是标准流,所以要通过管道来调用这 ...
- 【JavaEE企业应用实战学习记录】optiontransferselect实现两个列表选择框
<%@ page contentType="text/html; charset=GBK" language="java"%> <%@tagl ...
- python基础--基本数据类型考试_day3
1.执行 Python 脚本的两种方式 终端和交互模式 法1:python helloword.py 法2:ps: 执行前需给预chmod 755 helloword.py (linux系统中)./h ...
- CSS巩固
1. 浮动元素与非浮动元素在一行,浮动元素不占宽度.所以应将非浮动元素改为浮动,或让非浮动元素的宽度为当前行的宽度. 元素浮动之后,周围的元素会重新排列. 2. 布局找模板,或参考其他网站! 自己进行 ...
- webservice的常用注解
定义说明书的显示方法1.@WebService(serviceName="PojoService", portName="PojoPort", name=&qu ...
- struct和typedef struct用法
参考:http://www.cnblogs.com/qyaizs/articles/2039101.html C语言: typedef struct Student{ int score; }Stu; ...
- CocoaPods安装与使用
CocoaPods简介: CocoaPods 是什么? CocoaPods 是开发 OS X 和 iOS 应用程序的一个第三方库的依赖管理工具.利用 CocoaPods,可以定义自己的依赖关系 (称作 ...
- 解决jQuery UI 对话框兼容性问题
默认情况下使用jQuery UI的对话框,在Chrome浏览器是没问题的,但是在IE里却会显示对话框,用户体验非常不好.改变一下div的属性即可. 原本是这样: <div id="di ...
- 2.python算法之回形矩阵
代码: #!/usr/bin/env python # encoding: utf-8 """ @author: 侠之大者kamil @file: 2.回形矩阵.py @ ...
- 73.Android之SparseArray替代HashMap
转载:https://liuzhichao.com/p/832.html HashMap是java里比较常用的一个集合类,我比较习惯用来缓存一些处理后的结果.最近在做一个Android项目,在代码中定 ...