响应式网站

响应式

　　　　响应式网站就是根据不一样的屏幕宽度以最佳的显示方式显示出来，一般用媒体查询@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;

　　　　　在屏幕达到缩放的条件是后，会一会儿缩放，我的感受挺好，呵呵