blocks|key|5726845|text|你需要让你的网站具有响应性，为了做到这一点，我们使用了一种叫做的东西，它基本上就是你的css语法中的额外标记。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5726846|使用是一个很好的框架，因为你刚刚开始使用响应式设计，它很容易定制来满足你的项目需求。|5726847|这还可以帮助您更好地了解流体网格系统是如何整合到您的站点中的。|5726848|希望这能有所帮助！|5726849|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>You need to make your website responsive, to do that we use something called <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries" rel="nofollow"><strong>media queries</strong></a> which is basically just extra markup in your css syntax.</p>

<p>A great framework to use since you're just starting out with responsive design would be using <a href="http://getbootstrap.com" rel="nofollow"><strong>Bootstrap</strong></a>, it's easily customised to fit the needs of your project.</p>

<p>This should also help give you a better understanding about how fluid grid systems are incorporated into your site.</p>

<p>Hope this helps!</p>


blocks|key|2197470|text|除了乔丹所说的。这是一个学习媒体查询和响应能力的好地方：https://www.udacity.com/course/mobile-web-development--cs256|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2197471|entityMap|0|LINK|mutability|MUTABLE|url|https://www.udacity.com/course/mobile-web-development--cs256^0|S|1O|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>In addition to what Jordan said. This is a great place to learn about media queries and responsiveness: <a href="https://www.udacity.com/course/mobile-web-development--cs256" rel="nofollow">https://www.udacity.com/course/mobile-web-development--cs256</a></p>


blocks|key|1718360|text|您可以执行此操作来调整页面大小以适合任何屏幕：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1718361|​|1718362|body+{
++background:+white;
++width:+100%25;
}

.content+{
++width:+100%25;
}

.paragraphs+{
++width:+50%25;
++margin:+0+auto;
}|code-block|syntax|javascript|1718363|<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>|1718364|1718365|谢谢|1718366|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You could do this to resize the page to fit any screen:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  background: white;
  width: 100%;
}

.content {
  width: 100%;
}

.paragraphs {
  width: 50%;
  margin: 0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Example of resizing&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="content"&gt;
      &lt;div class="header"&gt;
        &lt;h1&gt;Header&lt;/h1&gt;
      &lt;/div&gt;
      
      &lt;div class="paragraphs"&gt;
        &lt;p&gt;#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.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks</p>


blocks|key|4309662|text|您需要添加一个meta标记来标识宽度，并在宽度不同时添加媒体查询来执行操作。将百分比添加到css元素而不是像素上也是非常有用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4309663|HTML代码：|4309664|<!doctype+html>
++++<meta+name="viewport"+content="width=device-width"/>|code-block|syntax|javascript|4309665|添加meta标签以允许页面标识设备的宽度。请参阅Mozilla's+take+on+this|offset|length|4309666|在此示例中，将对<p>标记和背景上的四种不同设备宽度进行查询。|style|CODE|4309667|<body>
++++<h1>Media+Queries+Examples</h1>
++++<p>Increase+or+decrease+the+size+of+your+window+to+see+the+background+color+change</p>
</body>|4309668|CSS代码：|4309669|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;
++}
}|4309670|因此，在css中使用@media+Screen调用对屏幕的查询。您可以对所有媒体设备使用@Media+all+(请参阅进一步的阅读)当设备宽度达到该查询的范围内时，css将应用于相关元素。请参阅current+example。当您在JSFiddle窗口中拖动该框时，如果满足查询条件，它将更改背景颜色和文字颜色。您可以将相同的逻辑应用于手机、平板电脑、电视和台式机。Media+Queries+for+Standard+Devices+-+CSS+Tricks|4309671|这个例子是由JSFiddle上的一个匿名用户提供的。它提供了一个清晰的示例，说明需要什么来确保元素的样式与所讨论的设备相对应。我不接受任何荣誉。|4309672|进一步阅读|BOLD|4309673|4309674|Microsoft+-+Media+Queries+|unordered-list-item|4309675|@Media+Rule+-+W3C+|4309676|Responsive+Web+Design+Wiki|4309677|4309678|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag|1|http://jsfiddle.net/DrSRT/464/|2|https://css-tricks.com/snippets/css/media-queries-for-standard-devices/|3|https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries|4|http://www.w3schools.com/cssref/css3_pr_mediaquery.asp|5|http://en.wikipedia.org/wiki/Responsive_web_design^0|0|0|0|O|M|0|0|8|3|0|0|0|0|A|D|18|A|2P|F|1|53|1B|2|0|0|0|5|0|0|0|P|3|0|0|H|4|0|0|Q|5|0|0^^$0|@$1|2|3|4|5|6|7|1U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1X|8|@]|9|@$K|1Y|L|1Z|1|20]]|A|$]]|$1|M|3|N|5|6|7|21|8|@$K|22|L|23|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|F|7|24|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|25|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|26|8|@]|9|@]|A|$G|H]]|$1|W|3|X|5|6|7|27|8|@$K|28|L|29|O|P]|$K|2A|L|2B|O|P]]|9|@$K|2C|L|2D|1|2E]|$K|2F|L|2G|1|2H]]|A|$]]|$1|Y|3|Z|5|6|7|2I|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|2J|8|@$K|2K|L|2L|O|12]]|9|@]|A|$]]|$1|13|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|14|3|15|5|16|7|2N|8|@]|9|@$K|2O|L|2P|1|2Q]]|A|$]]|$1|17|3|18|5|16|7|2R|8|@]|9|@$K|2S|L|2T|1|2U]]|A|$]]|$1|19|3|1A|5|16|7|2V|8|@]|9|@$K|2W|L|2X|1|2Y]]|A|$]]|$1|1B|3|-4|5|6|7|2Z|8|@]|9|@]|A|$]]|$1|1C|3|-4|5|6|7|30|8|@]|9|@]|A|$]]]|1D|$1E|$5|1F|1G|1H|A|$1I|1J]]|1K|$5|1F|1G|1H|A|$1I|1L]]|1M|$5|1F|1G|1H|A|$1I|1N]]|1O|$5|1F|1G|1H|A|$1I|1P]]|1Q|$5|1F|1G|1H|A|$1I|1R]]|1S|$5|1F|1G|1H|A|$1I|1T]]]]

<p>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. </p>

<p>HTML code:</p>

<pre><code>&lt;!doctype html&gt;
    &lt;meta name="viewport" content="width=device-width"/&gt;
</code></pre>

<p>add the meta tag to allow for the page identify the width of the device. see <a href="https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag" rel="nofollow noreferrer">Mozilla's take on this</a>    </p>

<p>In this example a query for four different device widths on a <code>&lt;p&gt;</code> tag and background will be applied.  </p>

<pre><code>&lt;body&gt;
    &lt;h1&gt;Media Queries Examples&lt;/h1&gt;
    &lt;p&gt;Increase or decrease the size of your window to see the background color change&lt;/p&gt;
&lt;/body&gt;
</code></pre>

<p>The CSS code:</p>

<pre><code>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;
  }
}
</code></pre>

<p>So using the <code>@media Screen</code> inside your css calls a query for the screen. You can use <code>@Media all</code> 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 <a href="http://jsfiddle.net/DrSRT/464/" rel="nofollow noreferrer">current example</a>. 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. <a href="https://css-tricks.com/snippets/css/media-queries-for-standard-devices/" rel="nofollow noreferrer">Media Queries for Standard Devices - CSS Tricks</a></p>

<p>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.</p>

<p><strong>Further Reading</strong> <br>
 - <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries" rel="nofollow noreferrer">Microsoft - Media Queries</a> <br>
 - <a href="http://www.w3schools.com/cssref/css3_pr_mediaquery.asp" rel="nofollow noreferrer">@Media Rule - W3C</a> <br>
 - <a href="http://en.wikipedia.org/wiki/Responsive_web_design" rel="nofollow noreferrer">Responsive Web Design Wiki</a> <br></p>


blocks|key|2197565|text|有很多方法可以使DIV响应。最简单的方法是使用像bootstrap这样的框架，它可以为您完成所有工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2197566|另一种方法是使用@media('max-width:+1024px'){//code...}，这样你就可以定义在你想要的每种屏幕分辨率下会发生什么。|offset|length|style|CODE|2197567|entityMap^0|0|8|12|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>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.</p>

<p>The other way is to use <code>@media('max-width: 1024px'){//code...}</code>
this way you will define what will happen in each of the screen resolutions you want.</p>


<p>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</p>

<p>Thanks </p>

<p>HERE IS THE CSS FOR THE DIV:</p>

<pre><code>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;
</code></pre>


How to make a DIV element responsive

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

所以在我的小网站上，我有一个用CSS设置样式的div，当我用不同的分辨率测试时，这个盒子在11英寸的小屏幕上看起来扭曲了，而我的屏幕是27英寸的。怎样才能使我的700像素高200像素宽的div在所有显示器尺寸上看起来都是一样的？谢谢以下是DIV的CSS：text-align:center; border:3px sol...

问如何使DIV元素响应
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使DIV元素响应EN