标签: media-queries

我正在尝试使用媒体查询根据窗口的宽度更改块中元素的宽度(这允许我增加页面上的列数而不更改列的宽度).我希望能够使用em而不是像素来做到这一点,这样如果你改变字体大小,一切都会正确.但是,如果我使用以下内容:

html {
    font-size: 12px; /* you could also use 75% if you want to be percent based.*/
}

@media screen and (min-width: 42em) {
    div#page {
        width: 42em;
    }
}

当窗口的最小宽度达到我的浏览器(Safari)的默认字体大小42*16px时,将触发媒体查询,而div#page的宽度将为42*12px,从html元素继承字体大小.我真的很想根据我正在使用的文本的宽度触发媒体查询,有没有办法让它工作？

我有以下我想修改的HTML:

<div class="col1 width8"><img src="images/entity.jpg"></div>

我想使用媒体查询,但我不想修改css,而是将类名从width8替换为width6.以下标准媒体查询通常无法实现此目的:

@media only screen and (min-width: 1240px) and (max-width: 1484px) { }

我希望使用jquery删除类,并在窗口介于1240和1484px之间时添加一个类.你可以帮助我使用jquery替代媒体查询来修改内联类和id名称吗？

这是我的jquery

 $(document).ready(function() { 
    $(window).resize(function(){
            var width = $(window).width();

            if(width >= 1240 && width <= 1484){
                $('#info').removeClass('col9').addClass('col8');
            }
            else if(width >= 1485 && width <= 1788){
                $('#info').removeClass('col8').addClass('col7');
            }

            else if(width >= 1789 && width <= 2237){
                $('#info').removeClass('col7').addClass('col6');
            }

            else if(width >= 2238 && width <= 3000){
                $('#info').removeClass('col7').addClass('col6');
            }
            else{
                $('#info').removeClass('col8').addClass('col9');
             }
            })

.resize();

    });

我正在尝试使用整洁的波旁威士忌,我已经解决了大部分事情,但是我在创造突破点时遇到了一些障碍.

我更喜欢为手机,平板电脑,桌面和大型桌面制作单独的sass文件,我通常不会使用冒泡来创建我的媒体查询,因为我不喜欢它不仅仅创建一个媒体查询它通过css制作音调文件.但到目前为止,我似乎只能找到关于冒泡方法的文档.

关于如何在整洁中使用断点的文章

这是我做的:

$largedesktop-size:em(1050);

    // Bourbon Neat Breakpoints
    $largedesktop: new-breakpoint(min-width $largedesktop-size 16);


 @include media($largedesktop) { 
    body{
        background:black;
    }
  }

我也试过这个,它确实更新了bg颜色,但没有更新可视网格:

// Media Queries Breakpoints
$tablet-size:em(700);

@include media(min-width $tablet-size 8) {
    body{
        background:orange;
    }
  }

目前正在开发一个响应式设计网站.我使用媒体查询根据宽度和屏幕分辨率定位不同的设备.

1. 我有一个场景是我想使用屏幕分辨率来定位设备,但我不明白这是如何工作的.

2. 我想检查最小宽度和最大宽度,屏幕分辨率也可以从97dpi到ipad最大分辨率264dpi.但这似乎不起作用.如果我为hp加载的平板电脑提供单一分辨率最小宽度:155dpi它可以工作.但最小到最大分辨率条件似乎不起作用.你们能分享一下你的想法吗？

为此,我使用了类似下面的代码

@media only screen and (min-width:768px) 
and (max-width:1024px) and (min-resolution:96dpi) and (max-resolution:264dpi){ 

在页面运行时是否可以使用jQuery或其他任何方式更改宽度值@media query css？

所以,例如,如果在style.css我有

@media screen and (min-width: 400px) {
   /*whatever*/
}

500px在网站加载后将其更改为

我一直试图理解窗口宽度的确定方式,我想知道它是否与CSS和jQuery不同.

例如,我有CSS媒体查询:

@media (max-width: 979px) {
  /*my css here*/
}

还有一些jQuery:

if ($(window).width() < 979) {
  //my jQuery here
}

我希望如下: - 当浏览器调整大小并刷新为980px时,上述两个都将被忽略 - 当浏览器调整大小并刷新为978px时,上述两个都将激活.

然而,我发现 - jQuery和CSS直到大约964px及以下才开始. - 有时(如果我启用了window.resize)jQuery和CSS以单独的宽度(相隔几个像素)启动.

任何人都可以了解这里发生的事情吗？

顺便说一下,我将窗口宽度基于Firebug的布局查看器.

我正在努力遵循以下理解:如何根据样式动态地向元素/ DOM添加媒体(查询)？

以下问题我遇到了:

1)我知道AngularJS不能像<style> {{myMediaQueryStyles}} </style>指令那样操纵标签 .

2)作为内联样式注入的媒体查询ng-style也不起作用

我有以下内容 view-model.json

{
    "id":"936DA01F-9ABD-4D9D-80C7-02AF85C822A8",
    "contexts":[
        "@media (max-width: 1200px){ … }",
        "@media (max-width: 760px){ … }",
        "@media (max-width: 420px)){ … }"
    ]
}

在一个简单的指令中,我只是尝试将它们写入<style>标签

app.directive('addStyles', function()
{
    return {   
        template: '<style>{{view-model.contexts}}</style>'        
    };
});

是否有任何解决方法可以动态地将媒体相关样式添加到angularJS中的元素或整个文档中？

更改指令template: '<div>{{view-model.contexts}}</div>'有效,但样式不会被应用.

提前致谢!

大多数时候,我使用带有预设断点的LESS变量进行媒体查询,如下所示:

@s-max : ~"screen and (max-width: 40em)";
@m-max : ~"screen and (max-width: 50em)";
@l-max : ~"screen and (max-width: 60em)";

USAGE

.some-class {
    color: red;

    @media @s-max {
       color: blue;
    }
}

但有时,我希望能够在我的.less样式表中引用任意断点,而无需在单独的mixin文件中设置新的预设值.

你可以在SASS中做到这一点.mixin看起来像这样:

@mixin bp-min($canvas) {

    @media only screen and (min-width:$canvas) {@content;}
}

USAGE

@include bp-min(750px) {

//responsive styling for min-width of 750px

}

在LESS中,我想象等效的mixin看起来像这样:

.bp-min(@min) {

    @media only screen and (min-width:@min)...
}

唯一的问题是,LESS中缺少{@content}参数,它抓住了开发人员输入的其余样式.我喜欢SASS,但我不能在工作中使用它.

有谁知道这个问题的基于LESS的解决方案？

我有移动设备的css代码:

@media all and (min-width: 0px) and (max-width: 991px) {...}

我有这样的HTML:

<meta name="viewport" content="width=1024, initial-scale=1" id="viewportMt">

<script>
  window.onload = function () {
    if(screen.width < 970) {
      var vp = document.getElementById('viewportMt');
      vp.setAttribute('content','width=640, initial-scale=1');
    }
  }
</script>

主要的问题是,当我第一次打开我的网站时:在大多数设备上,我必须扩展我的浏览器视图以适应它...

可以自动安装设备吗？例如,如果设备宽度为340:我应该将其缩小一点(因为网站大到340px(它; s min.640px))...如果900:那么缩放...

甚至是ipad(在纵向模式下,因为它的宽度是768px).

有可能吗？

plunker:

https://plnkr.co/edit/5KhIlmtLkWhtROs7y188?p=preview

和演示:

为什么我有滚动条？我需要以某种方式将其缩小,以便我不会在那里有任何滚动条......我的容器应该是640px而没有移动设备的其他值...

我正在努力让2个背景图像彼此同步缩小,所以我的座位计划将适用于手机/平板电脑.

我已经尝试了背景封面,包含,100%并将其他div值设置为100%,但是保持这些座位就位没有乐趣.

因此,不仅650px以下的座位图需要缩小背景图像,而且座位图像也需要缩小 - 他们需要保持在座位平面上的位置.包含的div当前设置为15px以显示座位图像.

这是我正在使用的原始静态宽度代码 https://jsfiddle.net/kjyopdL8/

座位尺寸应为15px,直到座位图低于650px,然后座位图像与主要座位图图像同步缩小,同时保持相同的位置和比例

#theatre {
  width: 650px;
  float: left;
  padding-right: 5px;
  margin: 25px 15px 0 10px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

#bmessage {
  padding: 1px 3px;
  height: 20px;
  font-size: 14px;
  background: #ddf;
  color: #080;
  font-weight: bold;
}
#seats:before {
  content: url('http://i.imgur.com/qn56yss.gif');
}

#seats {
  margin: 10px 0;
  padding: 10px 0;
  position: relative;
}

#seats div {
  position: absolute;
  width:15px;
  height:15px;
}

#seats .s1.std.grey {
  background: url('https://s3.postimg.org/g9dq32nqr/1_1_2.png') no-repeat center top;
}

<div …