text.html

 
<p class="zw">在努力保证屏幕独立性的同时，我们也许会遇到这样的场景，针对屏幕的方向来书写样式，而不仅仅是依赖视窗宽度。</p> 
<p class="zw">在上面这个例子中，在用户竖屏使用手机的时候，我们会将一个<code>figure</code>元素的说明文字置于图片上方。</p> 
<pre class="代码无行号"><code>@media (orientation:portrait) { 
.figure { 
display : flex; 
flex-direction : row-reverse; } 
}</code></pre> 
<p class="zw">现在，当用户变为横屏使用的时候，我们需要为其准备一个展示样式。我们会改变<code>figure</code>元素的布局，图片置于左侧，而图释文字使用更小号的<code>figcaption</code>置于右侧。</p> 
<p class="图"><img alt="1007.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/71.jpg"></p> 
<p class="图题">谁说图注必须在图片的下方，一个意想不到的变化，会为用户带去惊喜，所以勇于创新吧。</p> 
<p class="图"><img alt="1008.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/72.jpg" style="width: 1274px" width="1274"></p> 
<p class="图题">最大化地利用空间，对于小屏幕来说非常重要，而媒体查询也成为横竖屏Web设计的神器之一。</p> 
<p class="zw">为了让这个<code>figure</code>元素的设计更加整齐，我们将会设置图片和图释，在它的底部垂直对齐。</p> 
<pre class="代码无行号"><code>@media (orientation:landscape) { 
.figure { 
display : flex; 
align-items : flex-end; } 
img { 
flex : 2 0 360px; } 
figcaption { 
flex : 1; } 
}</code></pre> 
<p class="zw">不管用户使用小屏智能手机，还是使用中号屏幕的平板电脑，这个图片元素的布局，都会在横竖屏切换时做出相应的变化。</p>