标签：CSS3 scale 缩放 100% 布局 用户 响应 width col

响应式Web设计-Viewport

viewport是用户网页的可视区域。
viewport翻译为中文可以叫做"视区"。

<metaname="viewport"content="width=device-width,initial-scale=1.0">

height：和width相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

媒体功能

@mediaonlyscreenand(max-width:500px){
body{
background-color:lightblue;
}
}

max-width定义输出设备中的页面最大可见区域宽度。

例子

*为移动端设计:*/
[class*="col-"]{
width:100%;
}
@mediaonlyscreenand(min-width:768px){
/*Fordesktop:*/
.col-1{width:8.33%;}
.col-2{width:16.66%;}
.col-3{width:25%;}
.col-4{width:33.33%;}
.col-5{width:41.66%;}
.col-6{width:50%;}
.col-7{width:58.33%;}
.col-8{width:66.66%;}
.col-9{width:75%;}
.col-10{width:83.33%;}
.col-11{width:91.66%;}
.col-12{width:100%;}
}

标签：CSS3,scale,缩放,100%,布局,用户,响应,width,col
来源： https://www.cnblogs.com/whwqf/p/15583386.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。