使用@media screen实现网页适应不同的分辨率

网页设计需求： 

PC端，一个Sign Up for free的框框要显示在右边，手机端，要显示在下边:

PC端： 

手机端：

可以用css 的 @media screen来实现， 

<style>
	/*PC端的时候放到右边显示*/
  @media screen and ( min-width: 960px){
     #div_get_sample_note{
        position:relative;  left:500px; top:-450px; width:400px; height:400px; border:1px solid #eee; padding:10px;
     }
  }      
</style>

<div class="selection-wrapper" >  
  <div class="input-row">
	<label for="Email" class="hidden-label">{{ 'customer.register.email' | t }}</label>
	<input type="email" name="customer[email]" id="Email" class="input-full{% if form.errors contains 'email' %} error{% endif %}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off">
  </div>

  <div class="input-row">
	<label for="CreatePassword" class="hidden-label">{{ 'customer.register.password' | t }}</label>
	<input type="password" name="customer[password]" id="CreatePassword" class="input-full{% if form.errors contains 'password' %} error{% endif %}">
  </div>

  <div class="input-row"> 
	<textarea id='info' style='font-style:italic' placeholder="Please tell us how you'll review the sample you get!"></textarea>
  </div>
  
  <p class="submit">
	<input type="submit" id='btn_submit' value="{{ 'customer.register.submit' | t }}" class="button solid">
	<a href="{{ shop.url }}" class="cancel">{{ 'customer.register.cancel' | t }}</a>
  </p>

  <p id='div_get_sample_note' style= '' > 
	Sign Up for Free Sample Now >>
  </p>  
  
</div>

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值。