css媒体查询改变上边距,CSS媒体查询宽度或高度

我在一个全屏页面的中心放置了一个徽标。

img.logo {

width: 920px;

height: 552px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -460px;

margin-top: -276px;

}

这很好用。

现在我想在不同的设备高度和宽度上使用不同的尺寸，所以我尝试使用媒体查询。

@media (max-width: 991px), (max-height: 460px) {

img.logo {

width: 235px;

height: 141px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -117px;

margin-top: -70px;

}

@media (min-width: 992px) and (max-width: 1199px), (min-height: 300px) and (max-height: 649px) {

img.logo {

width: 533px;

height: 320px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -276px;

margin-top: -160px;

}

@media (min-width: 1200px), (min-height: 650px) {

img.logo {

width: 920px;

height: 552px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -460px;

margin-top: -276px;

}

但如果两个参数同时发生变化，这仍然有效。

我希望它分开，因此您可以更改浏览器高度和图像大小更改或浏览器宽度或两者。

图像(徽标)应始终位于页面中间。

css媒体查询改变上边距,CSS媒体查询宽度或高度相关推荐

php+jq+添加css,jQuery添加/改变/移除CSS类
转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或 ...
CSS - 响应式布局（一）媒体查询
目录响应式布局引子理解响应式网页和响应式布局原理媒体查询什么是媒体查询? 什么是媒体类型? 什么是媒体特性? 媒体查询语法仿三星官网首页响应式布局引子通过前面两节的学习 CSS - ...
[css] 移动端的布局用过媒体查询吗？写出例子看看
[css] 移动端的布局用过媒体查询吗?写出例子看看 @media [type] and [condition] - not [condition] {- } @media [condition] a ...
[css] 移动端的布局用过媒体查询吗？写一个试试
[css] 移动端的布局用过媒体查询吗?写一个试试使用过Demo<style>.demo {width: 100px;height: 100px;background: #000000; ...
html改变元素外边距,CSS 简明教程 - 外边距 ( margin ) 属性
CSS margin 属性用于在 HTML 元素周围创建「空白」,这些空白在元素的边框之外创建我们可以单独设置元素的上边距,下边距,左边距和右边距,也可以使用 margin 属性同时设置所有边 ...
css外上边距怎么设置,css上边距怎么设置
CSS设置上边距的方法一:使用margin-top属性 margin-top属性可以设置元素的上外边距围绕在元素边框的空白区域是外边距.设置外边距会在元素外创建额外的"空白". ...
html盒子距离上边距50px,css中的margin属性
之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些" ...
html5 css3 内边距,css什么是内边距？css内边距的设置方法（实例）
在前端开发中经常会使用css盒子模型,一般我们会通过css设置width(宽度),padding(内边距),margin(外边距)等属性可以调节整个盒子的大小.本章就给大家介绍css盒子模型的内边距( ...
【CSS】盒子模型内边距 ① ( 内边距概念 | 内边距设置语法 | 内边距设置效果 | 代码示例 )
文章目录一.内边距 1.概念 2.内边距设置语法 3.内边距设置效果二.内边距代码示例 1.不设置边距的示例 2.设置边距的示例一.内边距 1.概念内边距是盒子的边框与内容之间的 ...

css媒体查询改变上边距,CSS媒体查询宽度或高度

css媒体查询改变上边距,CSS媒体查询宽度或高度相关推荐

最新文章

热门文章