关于HTML,css3自适应屏幕,自适应宽度
设置了在不同分辨率下,显示的css样式:
@media screen and (min-width:1080px){
.box{ width: 1080px;}.content{width: 1040px;}
.img{height:180px;}
.img{font-size: 48px;line-height: 180px;}
.title{font-size: 46px;line-height: 100px;}
.detail{font-size: 20px;}
}
@media screen and (min-width: 900px) and (max-width: 1079px) {
.box{ width: 900px; }.content{width: 860px;}
.img{height:160px;}
.img{font-size: 40px;line-height: 160px;}
.title{font-size: 38px;line-height: 80px;}
.detail{font-size: 17px;}
}
@media screen and (min-width: 768px) and (max-width: 899px) {
.box{ width: 768px; }.content{width: 728px;}
.img{height:140px;}
.img{font-size: 32px;line-height: 140px;}
.title{font-size: 30px;line-height: 60px;}
.detail{font-size: 14px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
.box{ width: 480px; }.content{width: 440px; }
.img{height:98px;}
.img{font-size: 24px;line-height: 100px;}
.title{font-size: 22px;line-height: 40px;}
.detail{font-size: 11px;}
}
@media only screen and (max-width: 479px) {
.box{ width: 300px; }.content{width: 300px;}
.img{height:60px;}
.img{font-size: 16px;line-height: 60px;}
.title{font-size: 14px;line-height: 20px;}
.detail{font-size: 8px;}
}
要是刚好在那个宽度上,如:屏幕宽度900,刚好
关于HTML,css3自适应屏幕,自适应宽度的更多相关文章
- html中图片自适应浏览器和屏幕,宽度高度自适应
1.(宽度自适应):在网页代码的头部,加入一行viewport元标签. <meta name="viewport" content="width=device-wi ...
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
如果说宽高自适应屏幕尺寸那么大家可能会想到 div{ width: 100%; height: 100% } 但是如果我要自适应屏幕尺寸的同时还要变成正方形呢?(高度和宽度相等而高度不能写死) 那就要 ...
- 通过rem自适应屏幕尺寸
通过rem自适应屏幕尺寸 常用的前端单位 px px就是pixel的缩写,设备分辨率,物理像素 pt pt就是point的缩写,逻辑分辨率,逻辑像素 em 参考物是父元素的font-size,具有继承 ...
- 4种必须知道的Android屏幕自适应解决方案
文章来源:http://blog.csdn.net/shimiso/article/details/19166167 demo下载:http://www.eoeandroid.com/forum.ph ...
- 【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【Cocos2d-x 3.x】屏幕自适应匹配
在进行游戏开发时, 由于市场上的Android移动设备的分辨率有很多种,而且IOS移动设备的分辨率也不相同,为了能让手游能在90%以上的移动设备较为完美的运行,因此需要考虑屏幕的自适应问题,让一套资源 ...
- android自适应屏幕方向和大小
一:不同的layout Android手机 屏幕 大小不一,有480x320, 640x360, 800x480.怎样才能让App自动 适应不同的屏幕 呢? 其实很简单,只需要在res目录下 ...
- Div 自适应屏幕大小
http://blog.csdn.net/wodetiankong516/article/details/7827256 Background 有时, 我们需要将div或者其他的Elemen ...
- 【Unity3D插件】NGUI屏幕自适应(转)
屏幕自适应 NGUI可以比较方便的实现屏幕自适应,但是它的官方教程里面针对这个问题没有详细的教程,所以可能在实现的时候会走比较多的弯路.以下是我在开发过程中找到的一个比较方便的实现方法. 主要组件 1 ...
- Unity3D NGUI自适应屏幕分辨率(2014/4/17更新)
原地址:http://blog.csdn.net/asd237241291/article/details/8126619 原创文章如需转载请注明:转载自 脱莫柔Unity3D学习之旅 本文链接地址: ...
随机推荐
- 第13届 广东工业大学ACM程序设计大赛 C题 平分游戏
第13届 广东工业大学ACM程序设计大赛 C题 平分游戏 题目描述 转眼间又过了一年,又有一届的师兄师姐要毕业了. 有些师兄师姐就去了景驰科技实习. 在景驰,员工是他们最宝贵的财富.只有把每一个人 ...
- Manacher以及回文树算法学习
Manacher以及回文树算法学习 一.Manacher 关于\(Manacher\),这篇博客 讲的很清楚. 大致总结一下 为了将长度为奇数的回文串和长度为偶数的回文串一起考虑,需要在原字符串中插入 ...
- [Leetcode] jump game ii 跳跃游戏
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- [Leetcode] combination sum ii 组合之和
Given a collection of candidate numbers ( C ) and a target number ( T), find all unique combinations ...
- HDOJ(HDU).2844 Coins (DP 多重背包+二进制优化)
HDOJ(HDU).2844 Coins (DP 多重背包+二进制优化) 题意分析 先把每种硬币按照二进制拆分好,然后做01背包即可.需要注意的是本题只需要求解可以凑出几种金钱的价格,而不需要输出种数 ...
- 【简单算法】22.删除链表的倒数第N个节点
题目: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: ->->->->, 和 n = . 当删除了倒数第二个节点后,链表变为 -& ...
- 《python核心编程》读书笔记--第18章 多线程编程
18.1引言 在多线程(multithreaded,MT)出现之前,电脑程序的运行由一个执行序列组成.多线程对某些任务来说是最理想的.这些任务有以下特点:它们本质上就是异步的,需要多个并发事务,各个事 ...
- Jokewithpermutation (DFS)
Problem J. Jokewithpermutation Input file: joke.inOutput file: joke.out Joey had saved a permutation ...
- NYOJ 832 DP
合并游戏 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 大家都知道Yougth除了热爱编程之外,他还有一个爱好就是喜欢玩. 某天在河边玩耍的时候,他发现了一种神奇的 ...
- vue-transition-move
<!Doctype> <html> <head> <meta charset="utf-8"> <meta name=&quo ...