标签: responsive

Sass中的媒体查询

我想知道是否有一种方法可以用sass编写媒体查询，因此我可以在例如300px至900px之间给出某种样式

在CSS中看起来像这样

@media only screen and (min-width: 300px) and (max-width: 900px){

}

Run Code Online (Sandbox Code Playgroud)

我知道我会写

@media (max-width: 900px)

Run Code Online (Sandbox Code Playgroud)

在无礼，但如何使范围？

media sass responsive

Mac*_* S.

lucky-day

5
推荐指数

4
解决办法

4651
查看次数

CSS定位绝对(4颗钻石紧密相连)

你好Stackoverflow用户!

我再次需要你的帮助.

我试图将4颗钻石放在一个页面的中心,作为登陆页面上的导航.4颗钻石应该让它们成为自己的钻石,我真的想不出怎么做.

我已经尝试过绝对的位置,但随后它的反应灵敏.

我在这个网站上有自举,所以也许有一个列的解决方案？我试过一切请帮忙.

.diamond-top {
  position: absolute;
  top: 25%;
  left: 39%;
}
.diamond-left {
  position: absolute;
  left: 30%;
  top: 38%;
}
.diamond-right {
  position: absolute;
  left: 48%;
  top: 38%;
}
.diamond-bottom {
  position: absolute;
  top: 51%;
  left: 39%;
}
.diamond-container {
  width: 212px;
  height: 212px;
  padding: 30px;
}
.diamond-container:hover .tile-link {
  -webkit-animation: rotateYaxis 5s linear infinite;
}
.tile-link {
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  width: 150px;
  height: 150px;
  display: block;
  position: relative;
  line-height: 150px;
  -webkit-transition: 1s ease-in-out; …

Run Code Online (Sandbox Code Playgroud)

html css twitter-bootstrap responsive

Not*_*sql

2016 11-10

5
推荐指数

1
解决办法

624
查看次数

用于移动视图的semantic-ui hide元素

我正在寻找semantic-ui正确的类来隐藏例如移动视图中的DIV.在Bootstrap中它很简单,我们有"visible-xs"和"hidden-xs".

但是在语义上我只发现了"仅移动网格"

semantic-ui responsive

squ*_*pat

lucky-day

5
推荐指数

1
解决办法

1344
查看次数

screen.lockOrientation不是函数

我想在chrome中使用Js中的API屏幕。

 if ( navigator.userAgent.match( /(android|iphone)/gi ) ) {
        if ( 'orientation' in screen ) {
            //console.log( '// API supported, yeah!' );
            //console.log( 'new orientation is ', screen.orientation );
            screen.lockOrientation( 'landscape' );
        } else {
            console.log( '// API not supported ' );
        }
    } else {
        //alert('none');
    }

Run Code Online (Sandbox Code Playgroud)

我的错误js：捕获了TypeError：screen.lockOrientation不是函数

/ *其他* /

if ( navigator.userAgent.match( /(android|iphone)/gi ) ) {
    if ( 'orientation' in screen ) {
        let locOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
        locOrientation('landscape');
        console.log( '// API supported, yeah!' , …

Run Code Online (Sandbox Code Playgroud)

javascript mobile responsive

Seb*_*Seb

2017 04-20

5
推荐指数

1
解决办法

6011
查看次数

用于角材的多项目响应式传送带

我正在尝试在AngularJS中创建一个多项目响应式滑块。我对Owl Carousel（https://owlcarousel2.github.io/OwlCarousel2/）和Slick Slider（http://kenwheeler.github.io/slick/）很熟悉，但是它们都使用jQuery，而我想要一些没有jQuery的东西。

请提出任何指令或滑块，或任何其他简单的方法。

我想实现以下输出：

谢谢！

slider carousel angularjs angularjs-material responsive

Wil*_*ott

2018 07-05

5
推荐指数

2
解决办法

1万
查看次数

为什么我的弹性物品没有包装？

因此，我在自己的flex-item div中添加了3张图片，它们都位于flex-container div内，随着我缩小浏览器窗口，这些图片会缩放，但是它们都保持内联而不是包装成一列，关于如何包装它们的任何想法？它是这样的：

div class="intro">
    <section id="intro-box">
      <h2>In a nutshell</h2>
      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened
        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>
      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar …

Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox responsive

AKL*_*012

2017 06-25

5
推荐指数

1
解决办法

637
查看次数

将iPhone X旋转到横向时,封面图像的左侧和下方会出现空白区域

今天发生了一个奇怪的问题.在测试一个简单的"即将推出"页面时,我的iPhone X上的背景图像在旋转到横向时不会填满整个视口.在Chrome和Safari中测试过.

产生问题的简化示例:

html {
  background: url(http://timwickstrom.com/assets/images/bg.png) no-repeat center center fixed;
  background-size: cover;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE HTML>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	</head>

	<body>
		
	</body>

</html>

Run Code Online (Sandbox Code Playgroud)

正如您在浏览器中看到的那样,渲染效果很好.在肖像中,它渲染得很好.在景观中没那么多.查看截图.

更新:无法在iPhone 7上重现这一点.只是iPhone X.

html5 cover responsive-design responsive

Tim*_*rom

2018 05-23

5
推荐指数

1
解决办法

2108
查看次数

如何在材料ui过渡中心模态并使其响应？

我尝试使用材质用户界面进行过渡的模态,并且有问题使其居中,并使其响应或居中在小尺寸屏幕(移动).

如果不使用过渡,模态可以居中并且在小尺寸上看起来很好,但如果我添加过渡,则模态不能居中或响应.

这是没有转换链接的代码模式.适用于大屏幕或小屏幕尺寸.

这是具有转换链接的代码模式.

我试图更改top&的值,left但仍然无法集中在大小屏幕尺寸:

function getModalStyle() {
  const top = 25;
  const left = 25;

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

Run Code Online (Sandbox Code Playgroud)

谁能帮我？

css responsive material-ui-next

Ras*_*Ras

lucky-day

5
推荐指数

1
解决办法

5188
查看次数

CSS:为什么这些响应方块不是完全正方形？

我正在尝试制作一个可调整大小的正方形网格,里面有一些文字.这是代码:

/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 18px;
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 18px - 8px);
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div …

Run Code Online (Sandbox Code Playgroud)

css flexbox responsive

ame*_*ina

lucky-day

5
推荐指数

1
解决办法

97
查看次数

将多个轮播项目合并到Flex网格中

考虑以下HTML：

<div class="wrapper">
    <div class="carousel">
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <div class="carousel">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

如果我的课不清楚，这里有两个基本的轮播...但是，如果我们想（在桌面屏幕上）将这些.itemdiv从.carousel父级中分离出来，并以自定义顺序将它们合并到一个flex网格中（无需操作） JS的DOM）。

这是什么应该看起来像桌面屏幕（不同颜色的瓷砖代表从不同的旋转木马项目）：