So how can I choose and apply between two different sets of CSS rules, based on the width available to the form, instead of the viewport width itself?
那么如何在两组不同的CSS规则之间进行选择和应用，基于窗体的宽度，而不是视口宽度本身？
As shown in Figure 2, Figure 3, Figure 4, and Figure 5, changes in font size and viewport width can have potentially dramatic effects on visual elements placed on the page.
如图2、图3、图4和图5所示，字体大小和浏览器窗口宽度的改变会对页面上的可视元素产生显著影响。
The viewport settings I chose for this application set the width of the page to the width of the device's current orientation.
我为该应用程序所选的视窗设置将把页面的宽度设为设备当前方位的宽度。
Because we chose to float the sidebar, there comes a point when the sidebar will flip under the main content area when the width of the viewport is too narrow.
因为我们选择让边栏浮动，所以当浏览器窗口的宽度太窄时，边栏会出现在主内容区域下面。
On most of the simulators, you'll notice that rotating the viewport causes the image to be scaled out to match the new 480-pixel width of the device.
在大多数模拟器中，您将注意到旋转视窗后将向外扩展图像以匹配设备的480像素的新宽度。
To set a specific scale, the content attribute of the viewport metatag is set to an explicit value: <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />.
为了设置特定的值，将viewportmetatag 的content属性设为一个显式的值： <metaname="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />。
To set a specific scale, the content attribute of the viewport metatag is set to an explicit value: <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />.
为了设置特定的值，将viewportmetatag 的content属性设为一个显式的值： <metaname="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />。
应用推荐