媒体查询(Media Queries)

媒体查询介绍
浏览器根据不同的窗口尺寸来选择使用不同的样式。
语法
@media 设备类型 and (设备特性)｛样式代码｝
外部样式表

<link 
  rel="stylesheet" 
  type="text/css" 
  media="screen and (max-device-width: 400px)" 
  href=“tinyScreen.css” 
/>

内部样式

@media only screen and (max-width: 767px) {
  .filter {
    //...
  }
}

移动端布局
移动端布局移动端h5、Android、iOS的各自实现方式不同，布局方式也不同。但，随着移动终端的普及，用户展示...
移动端布局方式
媒体查询(Media Queries) 媒体查询介绍浏览器根据不同的窗口尺寸来选择使用不同的样式。语法@medi...
PC/移动端布局方式
1.静态布局：布局特点：宽高固定 2.自适应布局：布局特点：不同分辨率下，页面元素位置变化，大小不变实现方法...
web移动端布局之流式布局
移动端布局之流式布局meta视口标签，写移动端布局必须加入视口标签：二倍图：在移动端布局中，我们需要一个5050...
2018-06-12 CSS中的flex布局详解
前言：之前我写过的一篇博客介绍CSS常用的几种布局方式，PC端最常见的就是浮动布局和flex布局，而在移动端，由于...
补充8: flex布局
flex 布局与传统布局传统布局兼容性好, 但是布局繁琐, 且不适合移动端flex布局更方便, 更适用移动端. ...
移动端css(三)
目录: 1 移动端特点 2 百分比布局 3 Flex布局一移动端特点 • 移动端和PC端网页不同点• 谷歌模拟...
网络编程(七）移动端布局(1)
pink老师移动端布局还有最后一小部分，坚持下，很快就能把网页端及移动端布局学完了。这篇博客主要讲述的是移动端布局...
CSS垂直居中总结
flex布局居中主流方式，广泛用于pc端和移动端 grid布局居中非主流，未来可能取代flex的用法，兼容性待提高...
移动端布局多种实现方式
title: 移动端布局多种实现方式date: 2017年9月17日 02:04:03tags: csscateg...