关于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学习之旅 本文链接地址: ...
随机推荐
- POJ3180:The Cow Prom——题解
http://poj.org/problem?id=3180 英文题以后都不粘贴题面. 大意:求点数大于1的强连通分量个数 #include<stack> #include<cstd ...
- UVA.10881 Piotr's Ants (思维题)
UVA.10881 Piotr's Ants (思维题) 题意分析 有一根长度为L cm的木棍,上有n只蚂蚁,蚂蚁要么向左爬,要么向右,速度均为1cm/s,若2只蚂蚁相撞,则蚂蚁同时调头.求解第T秒时 ...
- bzoj1045: [HAOI2008] 糖果传递(思维题)
首先每个人一定分到的糖果都是所有糖果的平均数ave. 设第i个人给i-1个人Xi个糖果,则有Ai-Xi+X(i+1)=ave. 则A1-X1+X2=ave,A2-X2+X3=ave,A3-X3+X4= ...
- 图片上传(方法一:jquery.upload.js)
一.在JSP页面引入jquery.upload.js 文件: <script type="text/javascript" src="${ctx}/script/j ...
- iOS常用RGB颜色的色值
常用RGB颜色表 色值 R G B 值 R G B 值 R G B 值 黑色 0 0 0 #000000 黄色 255 255 0 #FFFF00 浅灰蓝色 176 224 230 #B0E0E6 ...
- Leetcode 001. 两数之和(扩展)
1.题目要求 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 2.解法一:暴力法(for*for,O(n*n)) ...
- Java并发多线程 - 并发工具类JUC
安全共享对象策略 1.线程限制 : 一个被线程限制的对象,由线程独占,并且只能被占有它的线程修改 2.共享只读 : 一个共享只读的对象,在没有额外同步的情况下,可以被多个线程并发访问, 但是任何线程都 ...
- LightOJ 1085 - All Possible Increasing Subsequences 树状数组+离散
http://www.lightoj.com/volume_showproblem.php?problem=1085 题意:求一个序列的递增子序列个数. 思路:找规律可以发现,某个数作为末尾数的种类数 ...
- Android程序始终横屏
在AndroidManifest.xml文件里面的activity标签中加入以下属性 android:screenOrientation="landscape" android:c ...
- 阿里云oss命令详解
SYNOPSIS 上传,下载或拷贝Objects SYNTAX ossutil cp file_url cloud_url [-r] [-f] [-u] [--output-dir=odir] [-- ...