二手图书交易网站建设,网站建设方案2000字,可牛在线制作图片,做网络推广哪家好响应式布局#xff1a; 同一页面在不同的屏幕上有不同的布局#xff0c;即一套代码自适应不同的屏幕。 常用 单位#xff1a; 像素#xff08;px#xff09;#xff1a;像素是最常用的长度单位#xff0c;它表示屏幕上的一个物理像素点。例如#xff0c;width: 200px; … 响应式布局 同一页面在不同的屏幕上有不同的布局即一套代码自适应不同的屏幕。 常用 单位 像素px像素是最常用的长度单位它表示屏幕上的一个物理像素点。例如width: 200px; 表示元素的宽度为200个像素点。 百分比%百分比单位相对于父元素的尺寸进行计算。例如width: 50%; 表示元素的宽度为父元素宽度的50%。 emem单位是相于元素的字体大小计算的。例如font-size: 1.5em; 表示元素的字体大小为父元素字体大小的1.5倍。 我通常用来做段落缩进 text-indent:2em remrem单位也是相对于根元素即html元素的字体大小计算的。例如font-size: 1.2rem; 表示元素的字体大小为根元素字体大小的1.2倍。 vh和vwvh和vw单位分别表示视口高度和视口宽度的百分比。例如height: 50vh; 表示元素的高度为视口高度的50%。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlestylehtml {font-size: 20px;}.box1 {font-size: 1rem;}.box2 {font-size: 2rem;}.box3 {font-size: 3rem;}/style/headbodydiv classbox11rem/divdiv classbox22rem/divdiv classbox33rem/div/body
/htmlrem 除了可用于 font-size 外还可以用于任意其他表示长度的属性如 widthheight 等 响应式布局的实现 方案一 相对根元素响应 媒体查询 rem
使用媒体查询随屏幕宽度的变化调整根元素的 font-size使用单位 rem 太累了明天继续
