响应式布局

实习笔记

断点设置
那么问题来了，普遍的响应式设计一般会要求按照主流设备的屏幕分辨率设置断点. 随着现在手机更新迭代越来越快，屏幕分辨率更是参差多态. 现在设置的断点，可能一年半载就已不适应. 所以与其让「屏幕分辨率」确定断点，不如让「内容」确定断点.

media

允许添加表达式用于确定媒体的情况，以此来应用不同的样式表，换句话说，允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。

Media Queries 工作的两种方式。

1、直接在link'中判断设备的尺寸，然后引入不同的css文件，关键在于引入的CSS文件不一样
2、另一种是直接写在标签里如：

@media screen and (max-width:600px){
    .class{
    background:#CCC;
    }
}

利用@media screen实现网页布局的自适应,@media screen and

折腾响应式布局设计

响应式布局性能优化

MOBILE WEB

网页自适应

viewport的选择