响应式网站

响应式

　　　　响应式网站就是根据不同的屏幕宽度以最佳的显示方式显示出来，通常用媒体查询@media来控制不同屏幕宽度段的显示方式

　　　　　　①现在html 里加一个屏幕宽度=设备宽度的说明

　　　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1">

　　　　　　② 在css样式里面

　　　　　　　　@media screen and (max-width : 800px){

　　　　　　　　　　body{

　　　　　　　　　　　　background : red;

　　　　　　　　　　}

　　　　　　　　}

 

　　　　　　上面表示小于多少像素的时候进行处理

　　　　　　一种是小于多少像素而且大于多少像素执行处理

　　　　　　@media screen (max-width : 800px) and {min-width: 700px} {

　　　　　　　　　　body{

　　　　　　　　　　　　background : red;

　　　　　　　　　　}

　　　　　　}

 

　　　　　　就是通过@media获取屏幕像素，指定小于或大于多少像素的时候处理一些效果或者是布局

　　这样就可以在不同的设备上通过获取不同设备的屏幕宽度来做相应的处理，达到多个设备不同的显示

　　效果，达到更加好的用户体验。

 

　　　　　还有在做响应式的时候，在最外层的div加一个

　　　　　　　　width:50%;  min-width: 700px;

　　　　　在屏幕达到缩放的条件是后，会一下子缩放，个人感觉挺好，呵呵