关于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学习之旅 本文链接地址: ...
随机推荐
- vue中使用 contenteditable 制作输入框并使用v-model做双向绑定
<template> <div class="div-input" :class="value.length > 0 ? 'placeholder ...
- 中国MOOC_面向对象程序设计——Java语言_第3周 对象容器_1查找里程
第3周编程题 查看帮助 返回 第3周编程题.注意程序(包括注释)中不能出现汉字. 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后 ...
- 访问修饰符public,private,protected和default的区别?
类的成员不写访问修饰符默认为default,默认对于同一个包的其他类相当于公开(public),对于不是同一个包的其他类相当于私有(private). 受保护(protected)对子类相当于公开,对 ...
- Java八种基本数据类型的大小,以及封装类,自动装箱/拆箱的用法?
参考:http://blog.csdn.net/mazhimazh/article/details/16799925 1. Java八种基本数据类型的大小,以及封装类,自动装箱/拆箱的用法? 原始类型 ...
- bzoj [POI2007]旅游景点atr 状态压缩+Dij
[POI2007]旅游景点atr Time Limit: 30 Sec Memory Limit: 357 MBSubmit: 2258 Solved: 595[Submit][Status][D ...
- eclipse中编写代码时如何自动提示变量名?
打开 Eclipse -> Window -> Perferences -> Java -> Editor -> Content Assist,在右边最下面一栏找到 a ...
- jquery获取textarea内容为空的问题
使用 定义了一个textarea,在使用jquery的方法获取文本内容的时候总是为空. var content = $("#content").val(); 后来测试发现,id不能 ...
- vijos 1313 金明的预算方案 树形DP
描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过N元钱就行”.今天一 ...
- 替换Jar包中的一个文件 Replace a file in a JAR
例如: jar uf myJarFile.jar com\vsoft\servlet\myServlet.class This will replace the class myServlet.cla ...
- C11性能之道:转移和转发
1.move C++11中可以将左值强制转换为右值,从而避免对象的拷贝来提升性能.move将对象的状态或者所有权从一个对象转移到另一个对象,没有内存拷贝.深拷贝和move的区别如图: 从图可以看出,深 ...