移动端rem布局初步练习

最新推荐文章于 2022-10-30 18:05:46 发布

miao淼

最新推荐文章于 2022-10-30 18:05:46 发布

阅读量1.2k

点赞数 1

分类专栏：网页前端文章标签： html5 javascript CSS3 rem media

本文链接：https://blog.csdn.net/wujimiao/article/details/62955283

版权

本文介绍了移动端布局中rem单位的使用，通过设置不同屏幕尺寸下的font-size基准值，实现响应式适配。讨论了使用meta标签、CSS3的@media查询以及JavaScript插件来设置font-size，同时指出这种方法在多设备适配和横竖屏切换时的局限性，并提到实际项目中响应式布局的策略选择。

摘要由CSDN通过智能技术生成

渐渐明白，要做就要做高级，现在社会已经不需要实习工，不需要初级员工。如果你培训几个月能够找到相关工作，如果刚毕业什么都不懂能够找到工作，请好好珍惜。因为很多小白给人免费实习别人都嫌碍事，本人亲历。

你不努力，就别想着高工资了，现在没有那个行业竞争不激烈，要做就要做好，否则就不要怪社会不公！

公司需要适配移动端，只好网上找找教程，请教朋友，才渐渐有些心得体会，小白级别，做个记号。

首先是移动头部meta的书写，这里写多点。

 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

可以使用h5写法，就是规定编码为utf8

	<meta name="keywords" content=“哈哈”/>
	 <meta name="description" content=“哈哈”/>

上面是SEO作用，给搜索引擎识别

下面几个是移动端布局必须加上的，一定要加上哦

	<meta name="apple-mobile-web-app-capable" content="yes" />
    	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    	<meta name="format-detection" content="telephone=no">

移动端设备识别，主要是安卓和苹果设备，微软的不做适配。安卓的大意是，