So on my small website I have a div that I styled with CSS and as I was testing with various resolutions, the box looked distorted on a small 11 inch screen compared to my 27 inch screen. How can I make my 700 pixel heigth 200 pixel width div look the same size on all monitor sizes
所以在我的小网站上,我有一个用CSS设计的div,当我用不同的分辨率进行测试时,与我的27英寸屏幕相比,这个盒子在11英寸的小屏幕上显得扭曲。如何在所有显示器尺寸上使我的700像素高200像素宽度div看起来相同
Thanks
HERE IS THE CSS FOR THE DIV:
这里是DIV的CSS:
text-align:center;
border:3px solid black;
padding-bottom:10px;
height:700px; width:200px;
background-color: white; margin-right: 2cm;
margin-top: -19cm;
margin-left: auto;
5 个解决方案
#1
You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.
您需要添加元标记以标识宽度和媒体查询,以便在宽度不同时执行操作。将百分比添加到css元素而不是像素上也非常有用。
HTML code:
<!doctype html>
<meta name="viewport" content="width=device-width"/>
add the meta tag to allow for the page identify the width of the device. see Mozilla's take on this
添加元标记以允许页面标识设备的宽度。看看Mozilla对此的看法
In this example a query for four different device widths on a <p> tag and background will be applied.
在此示例中,将应用对
标签和背景上的四种不同设备宽度的查询。
<body>
<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>
</body>
The CSS code:
CSS代码:
p {
font-family: arial,san-serif;
font-size: 13px;
font-color: black;
}
h1 {
font-size:30px;
}
@media screen and (min-width:761px) {
body {
background-color:white;
}
h1 {
color:red;
}
}
@media screen and (max-width:760px) {
body {
background-color: #333;
}
h1 {
color:red;
}
p {
color: white;
}
}
@media screen and (max-width:480px) {
body {
background-color: #807f83;
}
h1 {
color:white;
}
p {
color: white;
}
}
@media screen and (max-width:360px) {
body {
background-color: #0096d6;
}
h1 {
color:white;
font-size:25px;
}
p {
color: white;
}
}
So using the @media Screen inside your css calls a query for the screen. You can use @Media all for all media devices (see further reading) when the device width reaches within the bounds of that query the css will then be applied to the element in question. see a current example. When you drag the box in the JSFiddle window, it'll change the color of the background and the color of the writing if the query is satisfied. You can apply the same logic to phones, tablets, tv and desktop. Media Queries for Standard Devices - CSS Tricks
因此,使用css中的@media Screen会调用屏幕查询。当设备宽度达到该查询的范围内时,您可以将@Media all用于所有媒体设备(请参阅进一步阅读),然后将css应用于相关元素。看一个当前的例子。当你在JSFiddle窗口中拖动框时,如果满足查询,它将改变背景的颜色和书写的颜色。您可以将相同的逻辑应用于手机,平板电脑,电视和桌面。标准设备的媒体查询 - CSS技巧
This example was provided by an Anonymous user on JSFiddle. It provides a clear example of what is needed for you to ensure that your elements are styled in correspondence to the device in question. I take no credit.
此示例由JSFiddle上的匿名用户提供。它提供了一个明确的示例,说明您需要确保元素的样式与相关设备相对应。我不相信。
Further Reading
- Microsoft - Media Queries
- @Media Rule - W3C
- Responsive Web Design Wiki
进一步阅读 - 微软 - 媒体查询 - @Media Rule - W3C - 响应式网页设计Wiki
#2
You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.
您需要使您的网站响应,为此我们使用称为媒体查询的东西,这基本上只是您的css语法中的额外标记。
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
一个很好的框架,因为你刚开始使用响应式设计将使用Bootstrap,它可以轻松定制,以满足您的项目需求。
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
这也有助于您更好地了解流体网格系统如何整合到您的站点中。
Hope this helps!
希望这可以帮助!
#3
In addition to what Jordan said. This is a great place to learn about media queries and responsiveness: https://www.udacity.com/course/mobile-web-development--cs256
除了乔丹所说的。这是了解媒体查询和响应能力的好地方:https://www.udacity.com/course/mobile-web-development--cs256
#4
You could do this to resize the page to fit any screen:
你可以这样做来调整页面大小以适应任何屏幕:
body {
background: white;
width: 100%;
}
.content {
width: 100%;
}
.paragraphs {
width: 50%;
margin: 0 auto;
}<html>
<head>
<title>Example of resizing</title>
</head>
<body>
<div class="content">
<div class="header">
<h1>Header</h1>
</div>
<div class="paragraphs">
<p>#000000 color RGB value is (0,0,0). This hex color code is also a web safe color which is equal to #000. #000000 color name is Black color.
#000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #000000 hue: 0.00 , saturation: 0.00 and the lightness value of 000000 is 0.00.
The process color (four color CMYK) of #000000 color hex is 0.00, 0.00, 0.00, 1.00. Web safe color of #000000 is #000000. Color #000000 rgb is equally color.</p>
</div>
</div>
</body>
</html>Thanks
#5
There are a lot of ways to make a DIV responsive. The easiest one is to use a framework like bootstrap that does all of the work for you.
有很多方法可以使DIV响应。最简单的方法是使用像bootstrap这样的框架来完成所有工作。
The other way is to use @media('max-width: 1024px'){//code...} this way you will define what will happen in each of the screen resolutions you want.
另一种方法是使用@media('max-width:1024px'){// code ...}这样你就可以定义你想要的每个屏幕分辨率会发生什么。
#1
You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.
您需要添加元标记以标识宽度和媒体查询,以便在宽度不同时执行操作。将百分比添加到css元素而不是像素上也非常有用。
HTML code:
<!doctype html>
<meta name="viewport" content="width=device-width"/>
add the meta tag to allow for the page identify the width of the device. see Mozilla's take on this
添加元标记以允许页面标识设备的宽度。看看Mozilla对此的看法
In this example a query for four different device widths on a <p> tag and background will be applied.
在此示例中,将应用对
标签和背景上的四种不同设备宽度的查询。
<body>
<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>
</body>
The CSS code:
CSS代码:
p {
font-family: arial,san-serif;
font-size: 13px;
font-color: black;
}
h1 {
font-size:30px;
}
@media screen and (min-width:761px) {
body {
background-color:white;
}
h1 {
color:red;
}
}
@media screen and (max-width:760px) {
body {
background-color: #333;
}
h1 {
color:red;
}
p {
color: white;
}
}
@media screen and (max-width:480px) {
body {
background-color: #807f83;
}
h1 {
color:white;
}
p {
color: white;
}
}
@media screen and (max-width:360px) {
body {
background-color: #0096d6;
}
h1 {
color:white;
font-size:25px;
}
p {
color: white;
}
}
So using the @media Screen inside your css calls a query for the screen. You can use @Media all for all media devices (see further reading) when the device width reaches within the bounds of that query the css will then be applied to the element in question. see a current example. When you drag the box in the JSFiddle window, it'll change the color of the background and the color of the writing if the query is satisfied. You can apply the same logic to phones, tablets, tv and desktop. Media Queries for Standard Devices - CSS Tricks
因此,使用css中的@media Screen会调用屏幕查询。当设备宽度达到该查询的范围内时,您可以将@Media all用于所有媒体设备(请参阅进一步阅读),然后将css应用于相关元素。看一个当前的例子。当你在JSFiddle窗口中拖动框时,如果满足查询,它将改变背景的颜色和书写的颜色。您可以将相同的逻辑应用于手机,平板电脑,电视和桌面。标准设备的媒体查询 - CSS技巧
This example was provided by an Anonymous user on JSFiddle. It provides a clear example of what is needed for you to ensure that your elements are styled in correspondence to the device in question. I take no credit.
此示例由JSFiddle上的匿名用户提供。它提供了一个明确的示例,说明您需要确保元素的样式与相关设备相对应。我不相信。
Further Reading
- Microsoft - Media Queries
- @Media Rule - W3C
- Responsive Web Design Wiki
进一步阅读 - 微软 - 媒体查询 - @Media Rule - W3C - 响应式网页设计Wiki
#2
You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.
您需要使您的网站响应,为此我们使用称为媒体查询的东西,这基本上只是您的css语法中的额外标记。
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
一个很好的框架,因为你刚开始使用响应式设计将使用Bootstrap,它可以轻松定制,以满足您的项目需求。
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
这也有助于您更好地了解流体网格系统如何整合到您的站点中。
Hope this helps!
希望这可以帮助!
#3
In addition to what Jordan said. This is a great place to learn about media queries and responsiveness: https://www.udacity.com/course/mobile-web-development--cs256
除了乔丹所说的。这是了解媒体查询和响应能力的好地方:https://www.udacity.com/course/mobile-web-development--cs256
#4
You could do this to resize the page to fit any screen:
你可以这样做来调整页面大小以适应任何屏幕:
body {
background: white;
width: 100%;
}
.content {
width: 100%;
}
.paragraphs {
width: 50%;
margin: 0 auto;
}<html>
<head>
<title>Example of resizing</title>
</head>
<body>
<div class="content">
<div class="header">
<h1>Header</h1>
</div>
<div class="paragraphs">
<p>#000000 color RGB value is (0,0,0). This hex color code is also a web safe color which is equal to #000. #000000 color name is Black color.
#000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #000000 hue: 0.00 , saturation: 0.00 and the lightness value of 000000 is 0.00.
The process color (four color CMYK) of #000000 color hex is 0.00, 0.00, 0.00, 1.00. Web safe color of #000000 is #000000. Color #000000 rgb is equally color.</p>
</div>
</div>
</body>
</html>Thanks
#5
There are a lot of ways to make a DIV responsive. The easiest one is to use a framework like bootstrap that does all of the work for you.
有很多方法可以使DIV响应。最简单的方法是使用像bootstrap这样的框架来完成所有工作。
The other way is to use @media('max-width: 1024px'){//code...} this way you will define what will happen in each of the screen resolutions you want.
另一种方法是使用@media('max-width:1024px'){// code ...}这样你就可以定义你想要的每个屏幕分辨率会发生什么。