百度收录网站的图片,优秀材料写作网站,一个主机放多个网站,网站建设先进部门评选标准1.响应式布局容器 父局作为布局容器#xff0c;配合自己元素实现变化效果#xff0c;原理#xff1a;在不通过屏幕下面吗#xff0c;通过媒体查询来改变子元素的排列方式和大小#xff0c;从而实现不同尺寸屏幕下看到不同的效果。
2.响应尺寸布局容器常见宽度划分
手机-…1.响应式布局容器 父局作为布局容器配合自己元素实现变化效果原理在不通过屏幕下面吗通过媒体查询来改变子元素的排列方式和大小从而实现不同尺寸屏幕下看到不同的效果。
2.响应尺寸布局容器常见宽度划分
手机-小于768px 宽度设置100%
平板-大于等于768px 设置宽度为750px
桌面显示器-大于等于992px 设置宽度 970px
大屏幕显示器-大于等于1200px 宽度设置为 1170px;
设置宽度比屏幕尺寸小留取左右空白居中对齐
3.媒体查询检测屏幕尺寸应用样式
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.content {height: 400px;background-color: red;margin: 0 auto;}/* 手机-小于768px 宽度设置100%*/media screen and (max-width:767px) {.content {width: 100%;}}/* 平板-大于等于768px 设置宽度为750px */media screen and (min-width:768px) {.content {width: 750px;}}/* 桌面显示器-大于等于992px 设置宽度 970px */media screen and (min-width:992px) {.content {width: 970px;}}/* 大屏幕显示器-大于等于1200px 宽度设置为 1170px; */media screen and (min-width:1200px) {.content {width: 1170px;}}/style
/headbodydiv classcontent/div
/body/html 3.总结
核心的实现方法 根据媒体查询不同的屏幕尺寸大小来应用不同的css来实现不同的尺寸下屏幕的显示。
