响应式布局 本是古典 何须时尚 2022-01-29 00:47 412阅读 0赞 **响应式布局** 响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享下我做的一个简单的响应式的布局： ![987491-20160713105352451-1722126783.png][] ![987491-20160713105637357-1053894165.png][] 不同的页面会适用不同大小浏览器页面，它会随着分辨率的变化而变化。代码展示如下： <table> <tbody> <tr> <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> <p>22</p> <p>23</p> <p>24</p> <p>25</p> <p>26</p> <p>27</p> <p>28</p> <p>29</p> <p>30</p> <p>31</p> <p>32</p> <p>33</p> <p>34</p> <p>35</p> <p>36</p> <p>37</p> <p>38</p> <p>39</p> <p>40</p> <p>41</p> <p>42</p> <p>43</p> <p>44</p> <p>45</p> <p>46</p> <p>47</p> <p>48</p> <p>49</p> <p>50</p> <p>51</p> <p>52</p> <p>53</p> <p>54</p> <p>55</p> <p>56</p> <p>57</p> <p>58</p> <p>59</p> <p>60</p> <p>61</p> <p>62</p> <p>63</p> <p>64</p> <p>65</p> <p>66</p> <p>67</p> <p>68</p> <p>69</p> <p>70</p> <p>71</p> <p>72</p> <p>73</p> <p>74</p> <p>75</p> <p>76</p> <p>77</p> <p>78</p> <p>79</p> <p>80</p> <p>81</p> <p>82</p> <p>83</p> <p>84</p> <p>85</p> <p>86</p> <p>87</p> <p>88</p> <p>89</p> <p>90</p> <p>91</p> <p>92</p> <p>93</p> <p>94</p> <p>95</p> <p>96</p> <p>97</p> <p>98</p> <p>99</p> <p>100</p> <p>101</p> <p>102</p> <p>103</p> <p>104</p> <p>105</p> <p>106</p> <p>107</p> <p>108</p> <p>109</p> <p>110</p> <p>111</p> <p>112</p> <p>113</p> <p>114</p> <p>115</p> <p>116</p> <p>117</p> <p>118</p> <p>119</p> <p>120</p> <p>121</p> <p>122</p> <p>123</p> <p>124</p> <p>125</p> <p>126</p> <p>127</p> <p>128</p> <p>129</p> <p>130</p> <p>131</p> <p>132</p> <p>133</p> <p>134</p> <p>135</p> <p>136</p> <p>137</p> <p>138</p> <p>139</p> <p>140</p> <p>141</p> <p>142</p> <p>143</p> <p>144</p> <p>145</p> <p>146</p> <p>147</p> <p>148</p> <p>149</p> <p>150</p> <p>151</p> <p>152</p> <p>153</p> <p>154</p> <p>155</p> <p>156</p> <p>157</p> <p>158</p> <p>159</p> <p>160</p> <p>161</p> <p>162</p> <p>163</p> <p>164</p> <p>165</p> <p>166</p> <p>167</p> <p>168</p> <p>169</p> <p>170</p> <p>171</p> <p>172</p> <p>173</p> <p>174</p> <p>175</p> <p>176</p> <p>177</p> <p>178</p> <p>179</p> <p>180</p> <p>181</p> <p>182</p> <p>183</p> <p>184</p> <p>185</p> <p>186</p> <p>187</p> <p>188</p> <p>189</p> <p>190</p> <p>191</p> <p>192</p> <p>193</p> <p>194</p> <p>195</p> <p>196</p> <p>197</p> <p>198</p> <p>199</p> <p>200</p> <p>201</p> <p>202</p> <p>203</p> <p>204</p> <p>205</p> <p>206</p> <p>207</p> <p>208</p> <p>209</p> <p>210</p> <p>211</p> <p>212</p> <p>213</p> </td> <td> <p><code><!</code><code>DOCTYPE</code> <code>html></code></p> <p><code><</code><code>html</code><code>></code></p> <p><code><</code><code>head</code><code>></code></p> <p><code><</code><code>meta</code> <code>charset="utf-8" /></code></p> <p><code><</code><code>title</code><code>></</code><code>title</code><code>></code></p> <p><code><</code><code>style</code><code>></code></p> <p><code> p{ </code></p> <p><code> font-size: 12px;</code></p> <p><code> }</code></p> <p><code> header{ </code></p> <p><code> width: 100%;</code></p> <p><code> }</code></p> <p><code> header img{ </code></p> <p><code> width: 100%;</code></p> <p><code> }</code></p> <p><code> @media (min-width: 1300px) and (max-width:1400px) { </code></p> <p><code> #left{ </code></p> <p><code> float: left;</code></p> <p><code> width: 30%;</code></p> <p><code> margin: 0px 50px;</code></p> <p><code> }</code></p> <p><code> #left #logo-bg{ </code></p> <p><code> margin: 10% 10%;</code></p> <p><code> width: 80%;</code></p> <p><code> position: relative;</code></p> <p><code> }</code></p> <p><code> #left #logo{ </code></p> <p><code> float: left;</code></p> <p><code> width: 12%;</code></p> <p><code> position: absolute;</code></p> <p><code> left: 13%;</code></p> <p><code> top: 230px;</code></p> <p><code> }</code></p> <p><code> #left p{ </code></p> <p><code> margin-bottom: -20px;</code></p> <p><code> }</code></p> <p><code> #left p,h4{ </code></p> <p><code> text-align: center;</code></p> <p><code> color: red;</code></p> <p><code> }</code></p> <p><code> #right{ </code></p> <p><code> float: left;</code></p> <p><code> width: 60%;</code></p> <p><code> margin: 15% 0px;</code></p> <p><code> }</code></p> <p><code> #right h2{ </code></p> <p><code> text-align: center;</code></p> <p><code> }</code></p> <p><code> #right fieldset{ </code></p> <p><code> text-align: center;</code></p> <p><code> border-left: none;</code></p> <p><code> border-right: none;</code></p> <p><code> border-bottom: none;</code></p> <p><code> }</code></p> <p><code> #right fieldset legend{ </code></p> <p><code> padding: 0px 20px;</code></p> <p><code> }</code></p> <p><code> #fen{ </code></p> <p><code> width: 100%;</code></p> <p><code> -webkit-column-count: 6;</code></p> <p><code> -moz-column-count: 6;</code></p> <p><code> -o-column-count: 6;</code></p> <p><code> -ms-column-count: 6;</code></p> <p><code> column-count: 6;</code></p> <p><code> -webkit-column-gap: 1em;</code></p> <p><code> -moz-column-gap: 1em;</code></p> <p><code> -o-column-gap: 1em;</code></p> <p><code> -ms-column-gap: 1em;</code></p> <p><code> column-gap: 1em;</code></p> <p><code> }</code></p> <p><code> #fen img{ </code></p> <p><code> width: 100%;</code></p> <p><code> border-radius: 10px 10px 10px 10px;</code></p> <p><code> }</code></p> <p><code> #fen p,h4{ </code></p> <p><code> text-align: center;</code></p> <p><code> color: red;</code></p> <p><code> }</code></p> <p><code> #fen p{ </code></p> <p><code> margin-bottom: -20px;</code></p> <p><code> }</code></p> <p><code> #di p{ </code></p> <p><code> text-align: center;</code></p> <p><code> }</code></p> <p><code> #di p span{ </code></p> <p><code> color: red;</code></p> <p><code> }</code></p> <p><code> }</code></p> <p><code> @media (min-width: 1000px) and (max-width:1300px){ </code></p> <p><code> #left{ </code></p> <p><code> float: left;</code></p> <p><code> width: 30%;</code></p> <p><code> margin: 0px 50px;</code></p> <p><code> }</code></p> <p><code> #left #logo-bg{ </code></p> <p><code> margin: 10% 10%;</code></p> <p><code> width: 80%;</code></p> <p><code> position: relative;</code></p> <p><code> }</code></p> <p><code> #left #logo{ </code></p> <p><code> width: 12%;</code></p> <p><code> position: absolute;</code></p> <p><code> left: 14%;</code></p> <p><code> top: 190px;</code></p> <p><code> }</code></p> <p><code> #left p{ </code></p> <p><code> margin-bottom: -20px;</code></p> <p><code> }</code></p> <p><code> #left p,h4{ </code></p> <p><code> text-align: center;</code></p> <p><code> color: red;</code></p> <p><code> }</code></p> <p><code> #right{ </code></p> <p><code> float: left;</code></p> <p><code> width: 60%;</code></p> <p><code> margin: 15% 0px;</code></p> <p><code> }</code></p> <p><code> #right h2{ </code></p> <p><code> text-align: center;</code></p> <p><code> }</code></p> <p><code> #right fieldset{ </code></p> <p><code> text-align: center;</code></p> <p><code> border-left: none;</code></p> <p><code> border-right: none;</code></p> <p><code> border-bottom: none;</code></p> <p><code> }</code></p> <p><code> #right fieldset legend{ </code></p> <p><code> padding: 0px 20px;</code></p> <p><code> }</code></p> <p><code> #fen{ </code></p> <p><code> width: 100%;</code></p> <p><code> -webkit-column-count: 3;</code></p> <p><code> -moz-column-count: 3;</code></p> <p><code> -o-column-count: 3;</code></p> <p><code> -ms-column-count: 3;</code></p> <p><code> column-count: 3;</code></p> <p><code> -webkit-column-gap: 1em;</code></p> <p><code> -moz-column-gap: 1em;</code></p> <p><code> -o-column-gap: 1em;</code></p> <p><code> -ms-column-gap: 1em;</code></p> <p><code> column-gap: 1em;</code></p> <p><code> }</code></p> <p><code> #fen img{ </code></p> <p><code> width: 100%;</code></p> <p><code> border-radius: 10px 10px 10px 10px;</code></p> <p><code> }</code></p> <p><code> #fen p,h4{ </code></p> <p><code> text-align: center;</code></p> <p><code> color: red;</code></p> <p><code> }</code></p> <p><code> #fen p{ </code></p> <p><code> margin-bottom: -20px;</code></p> <p><code> }</code></p> <p><code> #di p{ </code></p> <p><code> text-align: center;</code></p> <p><code> }</code></p> <p><code> #di p span{ </code></p> <p><code> color: red;</code></p> <p><code> }</code></p> <p><code> }</code></p> <p><code></</code><code>style</code><code>></code></p> <p><code></</code><code>head</code><code>></code></p> <p><code><</code><code>body</code><code>></code></p> <p><code> <</code><code>header</code><code>></code></p> <p><code> <</code><code>img</code> <code>src="img/rag.png" /></code></p> <p><code> </</code><code>header</code><code>></code></p> <p><code> <</code><code>aside</code> <code>id="left"></code></p> <p><code> <</code><code>img</code> <code>src="img/logo-bg.png" id="logo-bg"/></code></p> <p><code> <</code><code>img</code> <code>src="img/logo.png" id="logo" /></code></p> <p><code> <</code><code>hr</code> <code>/></code></p> <p><code> <</code><code>p</code><code>>THE</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>WEBLOCUE</</code><code>h4</code><code>></code></p> <p><code> <</code><code>hr</code> <code>/></code></p> <p><code> <</code><code>p</code><code>>THE</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>WEBLOCUE</</code><code>h4</code><code>></code></p> <p><code> <</code><code>hr</code> <code>/></code></p> <p><code> <</code><code>p</code><code>>THE</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>WEBLOCUE</</code><code>h4</code><code>></code></p> <p><code> <</code><code>hr</code> <code>/></code></p> <p><code> </</code><code>aside</code><code>></code></p> <p><code> <</code><code>article</code> <code>id="right"></code></p> <p><code> <</code><code>h2</code><code>>“Give me problems, give me work.”</</code><code>h2</code><code>></code></p> <p><code> <</code><code>p</code><code>>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</</code><code>p</code><code>></code></p> <p><code> <</code><code>p</code><code>>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</</code><code>p</code><code>></code></p> <p><code> <</code><code>fieldset</code><code>><</code><code>legend</code><code>>victors&villains</</code><code>legend</code><code>></</code><code>fieldset</code><code>></code></p> <p><code> <</code><code>div</code> <code>id="fen"></code></p> <p><code> <</code><code>img</code> <code>src="img/1.jpg" /></code></p> <p><code> <</code><code>p</code><code>>SETCOME</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>HOLEMES</</code><code>h4</code><code>></code></p> <p><code> <</code><code>img</code> <code>src="img/2.jpg" /></code></p> <p><code> <</code><code>p</code><code>>SETCOME</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>HOLEMES</</code><code>h4</code><code>></code></p> <p><code> <</code><code>img</code> <code>src="img/3.jpg" /></code></p> <p><code> <</code><code>p</code><code>>SETCOME</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>HOLEMES</</code><code>h4</code><code>></code></p> <p><code> <</code><code>img</code> <code>src="img/4.jpg" /></code></p> <p><code> <</code><code>p</code><code>>SETCOME</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>HOLEMES</</code><code>h4</code><code>></code></p> <p><code> <</code><code>img</code> <code>src="img/5.jpg" /></code></p> <p><code> <</code><code>p</code><code>>SETCOME</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>HOLEMES</</code><code>h4</code><code>></code></p> <p><code> <</code><code>img</code> <code>src="img/6.jpg" /></code></p> <p><code> <</code><code>p</code><code>>SETCOME</</code><code>p</code><code>></code></p> <p><code> <</code><code>h4</code><code>>HOLEMES</</code><code>h4</code><code>></code></p> <p><code> </</code><code>div</code><code>></code></p> <p><code> <</code><code>fieldset</code><code>><</code><code>legend</code><code>>*</</code><code>legend</code><code>></</code><code>fieldset</code><code>></code></p> <p><code> <</code><code>div</code> <code>id="di"></code></p> <p><code> <</code><code>p</code><code>>In the year 1878 I took <</code><code>span</code><code>>Suing table</</code><code>span</code><code>> dogree of Doctor</</code><code>p</code><code>></code></p> <p><code> <</code><code>p</code><code>>What the year 2016 I took dogree <</code><code>span</code><code>>Ruing roid</</code><code>span</code><code>> of Doctor</</code><code>p</code><code>></code></p> <p><code> </</code><code>div</code><code>></code></p> <p><code> </</code><code>article</code><code>></code></p> <p><code></</code><code>body</code><code>></code></p> <p><code></</code><code>html</code><code>></code></p> </td> </tr> </tbody> </table> [987491-20160713105352451-1722126783.png]: /images/20220129/f77c76c26b4a4fea8b5e1151e8bd7c55.png [987491-20160713105637357-1053894165.png]: /images/20220129/acbdc5214ea544c9bbde90645267292d.png
相关 响应式布局 一、响应式开发 1.1、概述 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 1.2、响应式布局容器 1 落日映苍穹つ/ 2023年10月14日 11:07/ 0 赞/ 119 阅读
相关 响应式布局 （给前端大全加星标，提升前端技能） > 作者：浪里行舟 > > https://github.com/ljianshu/Blog/issues/38 前言 柔光的暖阳◎/ 2023年08月17日 16:34/ 0 赞/ 211 阅读
相关 响应式布局。 响应式布局：[http://caibaojian.com/356.html][http_caibaojian.com_356.html] ①设置 Meta 标签 大多数移 待我称王封你为后i/ 2023年07月01日 08:55/ 0 赞/ 75 阅读
相关 响应式布局 目录： 1. 响应式布局介绍 2. 响应式布局特点 3. 响应式布局的实现方式 4. 响应式布局媒体查询使用 5. 响应式布局示例 1. 示例1 快来打我*/ 2022年10月18日 01:38/ 0 赞/ 423 阅读
相关 响应式布局 <table style="height:40px; border-color:a9a9a9; border-width:0px; background-color:a9a9a àì夳堔傛蜴生んèń/ 2022年07月11日 08:14/ 0 赞/ 345 阅读
相关 响应式布局 一、视口（viewport） 移动前端的viewport就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小。手机端和PC端视口存在差异，电脑端视口等于其分辨率，手机端的 迈不过友情╰/ 2022年03月31日 10:54/ 0 赞/ 405 阅读
相关 响应式布局 4.1 meta 标签 最简单的处理方式是加上一个 meta 标签 <meta name="viewport" content="width=device-width, 左手的ㄟ右手/ 2022年03月09日 10:06/ 0 赞/ 422 阅读
相关 响应式布局 响应式布局 响应式布局在面对不同分辨率设备灵活性强，在平时的网页设计中基本上都要用到响应式布局设计，它给我们提供了良好的用户浏览页面，能带给我们更好的客户体验，下面给大家分享 本是古典 何须时尚/ 2022年01月29日 00:47/ 0 赞/ 413 阅读
相关 响应式布局 简介 什么是响应式布局? 同一个页面在不同屏幕尺寸下有不同的布局 传统的开发方式是PC端开发一套,手机一套 使用响应式布局只需要开发一套 以你之姓@/ 2022年01月20日 10:47/ 0 赞/ 462 阅读
相关 响应式布局 一、什么是响应式布局？ 响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不 浅浅的花香味﹌/ 2021年12月22日 20:17/ 0 赞/ 450 阅读
落日映苍穹つ
àì夳堔傛蜴生んèń
左手的ㄟ右手
还没有评论，来说两句吧...