移动第一响应式设计

我目前正在重做我的CSS和其他东西需要使我的自适应网站响应 - 直到现在我设计我的网站为我的笔记本电脑，然后缩小，现在我从另一边做。移动第一响应式设计

我已经设法让网站在319x480上看起来不错，现在我要去看看我的第一个断点在哪里：你究竟如何去做这件事？我是否应该只调整窗口的水平尺寸并查看需要中断的位置，还是应该垂直进行调整？从教程我看到他们总是只是横向谈论，但是你错过了一些东西呢？

此外，现在它在纵向模式下看起来不错。比方说，我将在600px宽度为纵向制作一个断点，并在1000px处制作一个断点并且就是这样。那么我是否应该在回到319x480之后再次转向景观并再次扩展该网站并为景观模式找到新的断点？

你是如何以一种有条不紊的方式来解决这个问题的？我认为这是一个非常酷的设计方法，我真的想学习如何正确地做。

谢谢！

2017-04-06 emcolsson

欢迎来到SO请阅读[如何问]（http://stackoverflow.com/questions/how-to-ask），[“我可以问什么问题？”]（http：// stackoverflow。 com/help/on-topic）和[“我应该避免问什么类型的问题？”]（http://stackoverflow.com/help/dont-ask）。你的问题在这里非常广泛。 – Darren

不要担心垂直。您多久不必在桌面上滚动？在较小的屏幕上不常出现，几乎从不出现。专注于水平，做你说的话，调整大小，看看哪些地方需要调整。纵向和横向与横向调整浏览器大小相同。有些使用通用智能手机，桌面和桌面断点，但不是必需的。即使在使用这些常规断点时，仍然会发现需要调整的点。 – hungerstar

Best se bootstrap –

如果您先做移动设备，则希望使用最小宽度媒体查询。桌面首先使用最大宽度。专注于宽度而不是垂直高度，就像您要求的一样，如果浏览器窗口高度已调整大小，则滚动条通常很合适。你不希望人们必须通常水平滚动。

例子：

.header-title { 
    font-size: 14px; 
} 

@media screen and (min-width: 600px) { 
    .header-title { 
     font-size: 16px; 
    } 
} 

@media screen and (min-width: 1024px) { 
    .header-title { 
     font-size: 18px; 
    } 
}

来源

2017-04-06 14:19:52 StefanBob

所有主要的断点，你可以在浏览器控制台检查。在这里你可以看到，通常只有宽度发生变化。可能垂直调整大小不会影响你的页面太多

来源

2017-04-06 14:22:29

一般来说CSS断点是水平的，因为响应式有一个“流”布局。例如，如果您的网格布局并排放置3张照片，并且您的浏览器太窄而无法显示所有这些照片，则应将其叠放在一起，以便视图可以滚动浏览它们。

以多种尺寸和纵横比测试您的网站总是一个好主意，特别是在使用固定/绝对位置或计算高度的情况下。

来源

2017-04-06 14:23:21 ssylviageo

移动第一响应式设计

回答

相关问题