asp网站用什么软件,建设厅官方网站企业库,百度竞价排名官网,网站测速工具初始缩小#xff1a;布局视口大于视觉视口 初始放大#xff1a;布局视口小于视觉视口
布局视口等于视觉视口#xff08;这种动作行为叫做理想视口#xff09;
meta nameviewport contentwidth375 /
meta nameviewport布局视口大于视觉视口 初始放大布局视口小于视觉视口
布局视口等于视觉视口这种动作行为叫做理想视口
meta nameviewport contentwidth375 /
meta nameviewport contentwidthdevice-width / !-- 很少使用不用考虑 --meta nameviewport contentheight375 /!--initial-scale1初始不缩放一定程度上等价widthdevice-width--meta nameviewport contentinitial-scale1 /
由于兼容性通常一起写也不麻烦不禁止缩放
!-- 各有一些兼容性的问题所以最好一起写 --
meta nameviewport contentwidthdevice-width, initial-scale1 /
缩放
meta nameviewport contentinitial-scale2 /
meta nameviewport contentinitial-scale0.5 /!--默认可以缩放user-scalable:yes--meta nameviewport contentinitial-scale0.5, user-scalableyes / meta nameviewport contentinitial-scale0.5, user-scalableno / !--禁止缩放--metanameviewportcontentinitial-scale0.5, maximum-scale0.5, minimum-scale0.5/
由于兼容性通常一起写也不麻烦禁止缩放
!-- 如果禁止缩放 --metanameviewportcontentwidthdevice-width, initial-scale1, user-scalableno, maximum-scale1, minimum-scale1/
获取视口宽度
script// 获取视口宽度console.log(document.documentElement.clientWidth);console.log(document.documentElement.getBoundingClientRect().width);// 获取屏幕尺寸或者获取屏幕的分辨率// 不推荐使用有兼容性问题console.log(screen.width);/script
真机查看
vscode中打开html文件通过ipconfig查询IP地址并替换页面地址中的相应部分关闭电脑防火墙手机联机
开发中常用单位
px绝对单位当需要设置固定宽高时可用也可用于设置字体大小
%可用来布局相对单位可用用来设置宽度流体布局中会用到
em相对单位设置字体大小时1em父元素字体的大小设置其他比如宽高时1em自身字体的大小一般用来控制行首的缩进text-indent
rem相对单位设置字体大小时1rem根元素字体的大小
vw/vh/vmax/vmin 可以用来布局
1vw视口宽度的1%
1vh视口高度的1%
vmin当前vw和vh中较小的一个值
vmax当前vw和vh中较大的一个值
Flex弹性布局
设置display属性为flex或者inline-flex的元素称为弹性容器弹性项目指的是设置该属性的子元素注意不是后代元素哦
Flex容器的属性
flex-direction主轴方向(行水平列垂直)row row-reverse column column-reverse
flex-wrap换行形式(默认不换行)nowrap wrap wrap-reverse
flex-flow(前2个属性结合体)row wrap
justify-content(主轴水平对齐方式)flex-start(左对齐) flex-end(右对齐) center space-between(flex项目两者间隔相等) space-around(flex项目左右间隔相等)
align-items(交叉轴对齐方式) stretch(flex项目没有设置高度或者设置高度为auto 自动撑开) flex-start(起点对齐) flex-end(终点对齐) center baseline(基线对齐)
align-content(多根主轴情况下交叉轴对齐方式)stretch(多条主轴线平分Flex容器交叉轴空间)
Flex项目的属性
order值越小越靠前显示默认值0
flex-grow(定义Flex项目在主轴方向上的放大比例)默认值0
flex-shrink(定义Flex项目在主轴方向上的缩小比例)默认值1
flex-basis(定义在分配多余空间之前Flex项目占据的主轴大小)默认主轴大小等于宽度
flex(前3个属性合体)auto(1 1 auto) none(0 0 auto)
align-self(允许单个项目有与其他项目不一样的对齐方式可覆盖align-items属性) !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title圣杯布局/titlestyle*{padding: 0;margin: 0;}body{/* flex容器默认为水平 */display: flex;/* 纵向排列 */flex-direction: column;height: 100vh;background-color: pink;font-size: 24px;}.header-layout,.footer-layout{height: 80px;}.header-layout{background-color: red;}.footer-layout{background-color: yellow;}.body-layout{/* 默认为0 如果有剩余空间就撑开 */flex-grow: 1;display: flex;}.main-layout{flex-grow: 1;background-color: gray;}.nav-layout{width: 200px;background-color: green;order: -1;}.aside-layout{width: 200px;background-color: lightblue;}.flex-center{display: flex;/* 主轴水平居中 */justify-content: center;/* 交叉轴垂直居中 */align-items: center;}/style
/head
bodyheader classheader-layout flex-center头部/headerdiv classbody-layoutmain classmain-layout flex-center主体/mainnav classnav-layout flex-center导航/navaside classaside-layout flex-center侧栏/aside/divfooter classfooter-layout flex-center底部/footer
/body
/html vw和rem布局
根据视口宽度来调整字体大小
1rem等于html字体大小
{const docEl document.documentElement;const setHtmlFontSize () {const viewWidth docEl.clientWidth;docEl.style.fontSize ${viewWidth / 75}px;};setHtmlFontSize();window.addEventListener(resize, setHtmlFontSize, false);}
优先使用 vw 布局方案如果条件不允许比如浏览器不兼容 vw再选择 rem 方案
修改历史项目的时候如果该项目使用的是 rem 布局可以使用 vw rem 方案修改
优化不用加js代码而是使用vwrem方案
/* 1.原理 *//* viewWidth / 750px ?px / 10px *//* 100vw / 750px ?vw / 10px *//* ?vw 10px * 100vw / 750px *//* 2.实现 */html {/* font-size: 10px; *//* font-size: 10vw; *//* 10px * 100vw / 750px */font-size: 1.333333vw;}
