移动端PC端自适应
发表日期：2019-09 文章编辑：小灯 浏览次数：816
这是我把几个自适应的方式做了整理，供大家参考
媒体查询：
<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
html5要适应各种分辨率的移动设备，应该使用rem尺寸单位
@media (max-width: 320px) {
html{font-size:10px}
@media (min-width: 321px) and (max-width:374px){
html{font-size:12px}
@media (min-width: 375px) and (max-width: 414px){
html{font-size:14px}
@media (min-width: 415px) and (max-width: 479px){
html{font-size:16px}
@media (min-width: 480px) and (max-width: 568px){
html{font-size:18px}
@media (min-width: 569px) and (max-width: 666px){
html{font-size:20px}
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
把与元素尺寸有关的css，如width,height,line-height,margin,padding等都以rem作为单位，这样页面在不同设备下就能保持一致的网页布局。
举例来说，网页有一个.item类，设置了width为3.4rem，该类在不同分辨率下对应的实际宽度如下：
321px <= device-width <= 375px，font-size:11px ---> .item的width：34px 376px <= device-width <= 414px，font-size:12px ---> .item的width：37.4px 415px <= device-width <= 639px，font-size:15px ---> .item的width：40.8px 640px <= device-width <= 719px，font-size:20px ---> .item的width：51px 720px <= device-width <= 749px，font-size:22.5px ---> .item的width：76.5px 750px <= device-width <= 799px，font-size:23.5px ---> .item的width：79.8999999px 800px <= device-width ，font-size:25px ---> .item的width：85px
Bootstrap栅格布局
.col-xs-* 针对超小屏幕 手机（<768px）
.col-sm-* 小屏幕 平板 (≥768px)
.col-md-* 中等屏幕 桌面显示器 (≥992px)(栅格参数)
.col-lg-* 针对特大的（≥1200px）
栅格化布局方法和思路其实都很简单，就按照bootstrap的思路来，就是将一个容器，宽度一定或100%的，用一个分子去把这个容器分为很多份，bootstrap的方法是用百分比的方法来将这个容器分为n等份，这就是栅格化的思路，
rem只能在移动端进行布局，然后等比例的缩放，在pc端还是用px这种惯用的方法去实现比较好，rem并不能实现响应式布局，这是重要的缺点，rem只在移动端起到一个比较好的作用，当然以后的发展会说不定，也可能还有人发明出厉害的设计方案。而百分比的布局，这种方式有一点是有很大问题的，他是无法做到定高的，这是为什么，因为百分比定高，有时候bug很明显，所以很多人用px定高，这样不同分辨率的手机会使得显示不一样。
本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/20958.html
余先生：13699882642
企业建站知识
推广知识
小程序
微信营销
APP开发
